{% extends "base.dj.html" %}

{% load static %}
{% load widget_tweaks %}

{% block title %}Lockers Index{% endblock %}
{% block admin_link %}
  {% url 'admin:app_list' 'rentals' %}
{% endblock %}
{% block content %}
  <style>
    .locker-bank {
      text-align: center;
    }

    .lockers {
      display: flex;
      gap: 0.3rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .locker {
      display: grid;
      background-color: #333333;
      border-radius: 0.4rem;
      padding: 0.7rem;
      gap: 0.5rem;
    }

    .locker .door {
      background-color: hsl(24, 100%, 25%);
      border: 0.2rem solid black;
      border-radius: 0.5rem;
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: lightgray;
    }

    .locker .door[data-available="False"] {
      background-color: hsl(24, 15%, 25%);
      ;
    }

    .form-floating .select2-container .select2-selection {
      height: 3.5em;
      padding: 1.625rem .25rem;
    }

    .form-floating .select2-container .select2-selection .select2-selection__rendered {
      padding-right: 0.25rem;
    }
  </style>
  {% for bank, units in locker_banks.items %}
    <div class="locker-bank" data-bank="{{ bank.slug }}">
      <h2>{{ bank.name }}</h2>
      <div>{{ bank.location }}</div>
      <div class="lockers">
        {% for unit, lockers in units.items %}
          <div class="locker"
               style="grid-template-columns: repeat({{ unit.columns }}, minmax(7rem, 8.5rem))">
            {% for locker_form in lockers %}
              <div class="dropdown"
                   style="grid-row-start: {{ locker_form.instance.row|add:'1' }};
                          grid-column-start: {{ locker_form.instance.column|add:'1' }}">
                <span class="door {{ perms.rentals.view_lockerinfo|yesno:"btn dropdown-toggle," }}"
                      data-bs-toggle="dropdown"
                      data-bs-auto-close="outside"
                      aria-haspopup="true"
                      aria-expanded="false"
                      data-available="{{ locker_form.instance.available }}">
                  <h3 class="locker-address mb-0">{{ locker_form.instance.address }}</h3>
                  <div class="locker-status text-wrap">
                    {% if locker_form.instance.renter is not None %}
                      {% if perms.rentals.view_lockerinfo %}
                        {{ locker_form.instance.renter }}
                      {% else %}
                        Occupied
                      {% endif %}
                    {% elif locker_form.instance.reserved %}
                      Reserved
                    {% else %}
                      Empty
                    {% endif %}
                  </div>
                </span>
                {% if perms.rentals.view_lockerinfo %}
                  <div class="dropdown-menu">
                    <div class="dropdown-header">{{ locker_form.instance }}</div>
                    <form class="p-2"
                          action="{% url 'rentals:locker' locker_form.instance.id %}"
                          method="post">
                      {% csrf_token %}
                      <fieldset {{ perms.rentals.change_lockerinfo|yesno:",disabled" }}>
                        {% for field in locker_form.visible_fields %}
                          <div class="mb-3">
                            {% if field.widget_type == 'checkbox' %}
                              {% render_field field class+="btn-check" %}
                              {{ field|add_label_class:"btn btn-outline-primary" }}
                            {% else %}
                              <div class="form-floating">
                                {% render_field field class+="form-control" %}
                                {{ field.label_tag }}
                              </div>
                            {% endif %}
                            {{ field.errors }}
                            {% if field.help_text %}<p class="form-text">{{ field.help_text|safe }}</p>{% endif %}
                          </div>
                        {% endfor %}
                      </fieldset>
                      {% if perms.rentals.change_lockerinfo %}
                        {% for hidden in locker_form.hidden_fields %}{{ hidden }}{% endfor %}
                        <input class="btn btn-primary" type="submit" value="Submit">
                      {% endif %}
                    </form>
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
{% endblock %}
{% block footer %}
  <script type="text/javascript"
          src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
  <script>
    // reset form when dropdown menu is closed
    document.addEventListener('hide.bs.dropdown', (e) => {
      e.target.parentElement.querySelector('.dropdown-menu form').reset();
    });

    // Set select2 parent element to the dropdown menu, to prevent bootstrap from
    // hiding the menu when the select2 box is selected
    document.addEventListener('show.bs.dropdown', (e) => {
      let menu = $(e.target.parentElement).find('.dropdown-menu');
      let select = menu.find('[data-autocomplete-light-function="select2"]');

      let options = select.data('select2').options.options;
      options.dropdownParent = menu;

      select.select2(options);
    });
  </script>
  {{ form_media }}
{% endblock %}