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

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


{% macro action_form(form) %}
  <fieldset x-data="{action: '{{ form.task.initial }}'}">
    {{ form.non_field_errors() }}
    <div class="row gap-2x margin-bottom">
      <div>
        {{ form.task.errors }}
        {{ form.task.label_tag() }}
        {{ form.task|add_attr("x-model=action") }}
      </div>
      <div>{{ form.trigger_at.as_field_group() }}</div>
    </div>
    <div x-show="action==='counter.tasks.change_counters'" class="margin-bottom">
      {{ form.counters.as_field_group() }}
    </div>
    {%- if form.DELETE -%}
      <div class="row gap">
        {{ form.DELETE.as_field_group() }}
      </div>
    {%- else -%}
      <button
        class="btn btn-grey"
        @click.prevent="removeForm($event.target.closest('fieldset'))"
      >
        <i class="fa fa-minus"></i>{% trans %}Remove this action{% endtrans %}
      </button>
    {%- endif -%}
    {%- for field in form.hidden_fields() -%}
      {{ field }}
    {%- endfor -%}
    <hr />
  </fieldset>
{% endmacro %}


{% macro price_form(form) %}
  <fieldset>
    {{ form.non_field_errors() }}
    <div class="form-group row gap-2x">
      <div>{{ form.amount.as_field_group() }}</div>
      <div>
        {{ form.label.errors }}
        <label for="{{ form.label.id_for_label }}">{{ form.label.label }}</label>
        {{ form.label }}
        <span class="helptext">{{ form.label.help_text }}</span>
      </div>
      <div class="grow">{{ form.groups.as_field_group() }}</div>
    </div>
    <div class="form-group">
      <div>
        {{ form.is_always_shown.errors }}
        <div class="row gap">
          {{ form.is_always_shown }}
          <label for="{{ form.is_always_shown.id_for_label }}">{{ form.is_always_shown.label }}</label>
        </div>
        <span class="helptext">{{ form.is_always_shown.help_text }}</span>
      </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').parentElement)"
      >
        <i class="fa fa-minus"></i> {% trans %}Remove price{% endtrans %}
      </button>
    {%- endif -%}
    {%- for field in form.hidden_fields() -%}
      {{ field }}
    {%- endfor -%}
  </fieldset>
  <hr class="margin-bottom">
{% endmacro %}

{% block content %}
  {% if object %}
    <h2>{% trans name=object %}Edit product {{ name }}{% endtrans %}</h2>
    <p><i>{% trans %}Creation date{% endtrans %} : {{ object.created_at|date }}</i></p>
    <p><i>{% trans %}Last update{% endtrans %} : {{ object.updated_at|date }}</i></p>
  {% else %}
    <h2>{% trans %}Product creation{% endtrans %}</h2>
  {% endif %}
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.non_field_errors() }}
    <fieldset class="row gap">
      <div>{{ form.name.as_field_group() }}</div>
      <div>{{ form.code.as_field_group() }}</div>
    </fieldset>
    <fieldset>
      <div class="form-group">{{ form.description.as_field_group() }}</div>
    </fieldset>
    <fieldset class="row gap">
      <div>{{ form.club.as_field_group() }}</div>
      <div>{{ form.product_type.as_field_group() }}</div>
    </fieldset>
    <fieldset><div>{{ form.icon.as_field_group() }}</div></fieldset>
    <fieldset><div>{{ form.purchase_price.as_field_group() }}</div></fieldset>
    <fieldset>
      <div>{{ form.limit_age.as_field_group() }}</div>
    </fieldset>
    <fieldset>
      <div class="row gap">
        {{ form.tray }}
        <div>
          {{ form.tray.label_tag() }}
          <span class="helptext">{{ form.tray.help_text }}</span>
        </div>
      </div>
    </fieldset>
    <fieldset><div>{{ form.clic_limit.as_field_group() }}</div></fieldset>
    <fieldset><div>{{ form.counters.as_field_group() }}</div></fieldset>

    <h3 class="margin-bottom">{% trans %}Prices{% endtrans %}</h3>

    <div x-data="dynamicFormSet({ prefix: '{{ form.price_formset.prefix }}' })">
      {{ form.price_formset.management_form }}
      <div x-ref="formContainer">
        {%- for form in form.price_formset.forms -%}
          <div>
            {{ price_form(form) }}
          </div>
        {%- endfor -%}
      </div>
      <template x-ref="formTemplate">
        <div>
          {{ price_form(form.price_formset.empty_form) }}
        </div>
      </template>
      <button class="btn btn-grey" @click.prevent="addForm()">
        <i class="fa fa-plus"></i> {% trans %}Add a price{% endtrans %}
      </button>
    </div>

    <br />

    <h3>{% trans %}Automatic actions{% endtrans %}</h3>

    <p class="margin-bottom">
      <em>
        {%- trans trimmed -%}
          Automatic actions allows to schedule product changes
          ahead of time.
        {%- endtrans -%}
      </em>
    </p>

    <div x-data="dynamicFormSet({ prefix: '{{ form.action_formset.prefix }}' })" class="margin-bottom">
      {{ form.action_formset.management_form }}
      <div x-ref="formContainer">
        {%- for f in form.action_formset.forms -%}
          {{ action_form(f) }}
        {%- endfor -%}
      </div>
      <template x-ref="formTemplate">
        {{ action_form(form.action_formset.empty_form) }}
      </template>
      <button @click.prevent="addForm()" class="btn btn-grey">
        <i class="fa fa-plus"></i>{% trans %}Add action{% endtrans %}
      </button>
    </div>
    <div class="row gap margin-bottom">{{ form.archived.as_field_group() }}</div>
    <p><input class="btn btn-blue" type="submit" value="{% trans %}Save{% endtrans %}" /></p>
  </form>
{% endblock %}