{% extends "chrono/manager_agenda_view.html" %}
{% load i18n gadjo %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" aria-current="page">{% trans "Check booking" %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>
    {% blocktrans trimmed with user=view.bookings.0.user_name %}
      Check booking for {{ user }}
    {% endblocktrans %}
  </h2>
{% endblock %}

{% block content %}
  {% if multiple_bookings %}
    <div class="pk-tabs">
      <div class="pk-tabs--tab-list" role="tablist" aria-label="{% trans "Booking tabs" %}">
        {% for booking in view.bookings %}
          <button role="tab"
                  aria-selected="{{ forloop.first|yesno:"true,false" }}"
                  aria-controls="panel-{{ booking.pk }}"
                  id="tab-{{ booking.pk }}"
                  tabindex="{{ forloop.first|yesno:"0,-1" }}"
          >
            {{ booking.start_time|time:"H:i" }} - {{ booking.end_time|time:"H:i" }}
          </button>
        {% endfor %}
      </div>
  {% endif %}

  <form
    method="post"
    enctype="multipart/form-data"
    {% if multiple_bookings %}class="pk-tabs--container"{% endif %}
  >
    {% csrf_token %}

    {% for booking in view.bookings %}
      <div
        class="booking-check-forms"
        data-fill-start_time="{{ booking.start_time|time:"H:i" }}"
        data-fill-end_time="{{ booking.end_time|time:"H:i" }}"
        {% if multiple_bookings %}
          id="panel-{{ booking.pk }}"
          role="tabpanel" tabindex="0" {% if not forloop.first %}hidden{% endif %}
          data-tab-slug="{{ booking.pk }}"
          aria-labelledby="tab-{{ booking.pk }}"
        {% endif %}
      >

        <div class="booking-check-form">
          {{ booking.check_forms.0|with_template }}
        </div>

        {% if forms|length > 1 %}
          <details class="gadjo-remember-open-status" {% if forms.1.instance.pk or forms.1.errors %}open{% endif %}>
            <summary>{% trans "Second booking check" %}</summary>

            <div class="booking-check-form">
              {{ booking.check_forms.1|with_template }}
            </div>
          </details>
        {% endif %}

      </div>
    {% endfor %}

    <div class="buttons">
      <button class="submit-button">{% trans "Save" %}</button>
      <a class="cancel" href="{{ agenda.get_absolute_url }}">{% trans 'Cancel' %}</a>
    </div>

    <script>
      $(function () {
        // Tabs are not loaded if form is in popup, remove this block when fixed in gadjo
        $(document.querySelectorAll('.pk-tabs')).each(function(i, el) {
          el.tabs = new gadjo_js.Tabs(el);
        });

        $('.time-widget-button').on('click', function() {
          var widget_name = $(this).data('related-widget');
          var widget_id = widget_name.split('-').at(-1);
          var value = $(this).parents('.booking-check-forms').data('fill-' + widget_id);
          $('[name="' + widget_name + '"]').val(value);
        });
      });
    </script>
  </form>
  {% if multiple_bookings %}</div>{% endif %}
{% endblock %}