{% extends "chrono/manager_events_type_list.html" %}
{% load i18n %}

{% block page-title-extra-label %}
  {% if object.pk %}{{ object.label }}{% else %}{{ block.super }}{% endif %}
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  {% if object.pk %}
    <li class="ariane--list-item">
      <a class="ariane--link" href="{% url 'chrono-manager-events-type-view' pk=object.pk %}">{{ object.label }}</a>
    </li>
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page" href="{% url 'chrono-manager-events-type-edit' pk=object.pk %}">{% trans "Edit" %}</a>
    </li>
  {% else %}
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page" href="{% url 'chrono-manager-events-type-add' %}">{% trans "New events type" %}</a>
    </li>
  {% endif %}
{% endblock %}

{% block appbar %}
  {% if object.pk %}
    <h2>{% trans "Edit events type" %}</h2>
  {% else %}
    <h2>{% trans "New events type" %}</h2>
  {% endif %}
{% endblock %}

{% block content %}

  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    {% if object.pk %}
      <h3>{% trans "Custom fields" %}</h3>
      {{ formset.management_form }}
      <table id="custom-field-forms">
        <thead>
          <tr>
            {% for field in formset.0 %}
              <th class="column-{{ field.name }}{% if field.required %} required{% endif %}">{{ field.label }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for sub_form in formset %}
            <tr class='custom-field-form'>
              {% for field in sub_form %}
                <td class="field-{{ field.name }}">
                  {{ field.errors.as_ul }}
                  {{ field }}
                </td>
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
      <button data-formset-id="custom-field" class="formset--add-button" type="button">{% trans "Add another custom field" %}</button>
    {% endif %}
    <div class="buttons">
      <button class="submit-button">{% trans "Save" %}</button>
      {% if object.pk %}
        <a class="cancel" href="{% url 'chrono-manager-events-type-view' pk=object.pk %}">{% trans 'Cancel' %}</a>
      {% else %}
        <a class="cancel" href="{% url 'chrono-manager-events-type-list' %}">{% trans 'Cancel' %}</a>
      {% endif %}
    </div>

    <script>
      $('select[name$=field_type]').change(function() {
        if(this.value == 'item') {
          $(this).parent().siblings('.field-source_carddef').children().show();
        } else {
          $(this).parent().siblings('.field-source_carddef').children().hide();
        }
      }).change();
    </script>
  </form>
{% endblock %}

{% block sidebar %}
{% endblock %}