{% extends "core/base.jinja" %}

{% block additional_js %}
  <script type="module" src="{{ static("bundled/core/dynamic-formset-index.ts") }}"></script>
{% endblock %}

{% block title %}
  {% trans name=object %}Edit {{ name }}{% endtrans %}
{% endblock %}

{% macro link_form(form) %}
  <fieldset
    {# set url in x-init rather than in x-data,
       in order to trigger the $watch on initial load #}
    x-data="{ url: '', linkType: { icon: '', id: 0 } }"
    x-init="() => {
            $watch('url', (u) => linkType = linkTypes.find((t) => u.startsWith(t.url)));
            url = '{{ form.url.value() or "" }}';
            }"
  >
    {{ form.non_field_errors() }}
    <div class="form-group row gap-2x">
      <div>
        {{ form.url.label_tag() }}
        {{ form.url.errors }}
        <span>
          {# we change the icon when the user change it and leave the input,
             or when it is pasted from the clipboard #}
          {{ form.url|add_attr("x-model.change=url,@paste.prevent=url = $event.clipboardData.getData('text')") }}
          <i
            :class="linkType.icon || 'fa fa-link'"
            tooltip="{% trans %}This icon will change according to the given url.{% endtrans %}"
          ></i>
        </span>
      </div>
      <div>{{ form.name.as_field_group() }}</div>
    </div>
    {%- if form.DELETE -%}
      <div class="form-group row gap">
        {{ form.DELETE.as_field_group() }}
      </div>
    {%- else -%}
      <br>
      <button
        class="btn btn-grey"
        @click.prevent="removeForm($event.target.closest('fieldset'))"
      >
        <i class="fa fa-minus"></i> {% trans %}Remove link{% endtrans %}
      </button>
    {%- endif -%}
    {{ form.link_type|add_attr(":value=linkType.id") }}
    {%- for field in form.hidden_fields() -%}
      {%- if field != form.link_type -%}
        {{ field }}
      {%- endif -%}
    {%- endfor -%}
  </fieldset>
{% endmacro %}


{% block content %}
  <h2>{% trans name=object %}Edit {{ name }}{% endtrans %}</h2>

  <form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    {{ form.non_field_errors() }}

    {% if form.admin_fields %}
      {# If the user is admin, display the admin fields,
         and explicitly separate them from the non-admin ones,
         with some help text.
         Non-admin users will only see the regular form fields,
         so they don't need those explanations #}
      <h3>{% trans %}Club properties{% endtrans %}</h3>
      <p class="helptext">
        {% trans trimmed %}
          The following form fields are linked to the core properties of a club.
          Only admin users can see and edit them.
        {% endtrans %}
      </p>
      <fieldset class="margin-bottom">
        {% for field_name in form.admin_fields %}
          {% set field = form[field_name] %}
          <div class="form-group">
            {{ field.errors }}
            {{ field.label_tag() }}
            {{ field }}
          </div>
          {# Remove the the admin fields from the form.
             The remaining non-admin fields will be rendered
             at once with a simple {{ form.as_p() }} #}
          {% do form.fields.pop(field_name) %}
        {% endfor %}
      </fieldset>
    {% endif %}

    <h3>{% trans %}Club informations{% endtrans %}</h3>
    {% if form.admin_fields %}
      <p class="helptext">
        {% trans trimmed %}
          The following form fields are linked to the basic description of a club.
          All board members of this club can see and edit them.
        {% endtrans %}
      </p>
    {% endif %}
    <fieldset class="margin-bottom">
      {{ form.as_p() }}
    </fieldset>

    <h3>{% trans %}Club links{% endtrans %}</h3>
    <div x-data="dynamicFormSet({ prefix: '{{ form.link_formset.prefix }}' })" class="margin-bottom">
      {{ form.link_formset.management_form }}
      <div x-ref="formContainer">
        {%- for f in form.link_formset.forms -%}
          {{ link_form(f) }}
        {%- endfor -%}
      </div>
      <template x-ref="formTemplate">
        {{ link_form(form.link_formset.empty_form) }}
      </template>
      <p>
        <i>{% trans trimmed %}
          Note: if the icon of one of your links doesn't exist yet,
          you can ask the info team to add it.
        {% endtrans %}</i>
      </p>
      <br>
      <button @click.prevent="addForm()" class="btn btn-grey">
        <i class="fa fa-plus"></i>{% trans %}Add link{% endtrans %}
      </button>
    </div>
    <hr>
    <button type="submit" class="btn btn-blue">
      <i class="fa fa-check"></i>{% trans %}Save{% endtrans %}
    </button>
  </form>
{% endblock content %}

{% block script %}
  <script>
    const linkTypes = [
      {%- for t in link_types -%}
        { id: {{ t.id }}, url: '{{ t.url_base }}', icon: '{{ t.icon }}' },
      {%- endfor -%}
    ];
  </script>
{% endblock %}