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

{% load render_table from django_tables2 %}

{% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}

{% block content %}
  <div class="vstack align-items-center">
    <ul class="nav nav-tabs">
      {% for report_name, report_url in report_types %}
        <li class="nav-item">
          <a class="nav-link{% if report_name == selected_report %} active{% endif %}"
             href="{{ report_url }}?{{ query_params }}">{{ report_name }}</a>
        </li>
      {% endfor %}
    </ul>

    <form method="get" class="container-fluid">
      <div class="row g-2 align-items-center justify-content-center">
        <div class="col-auto">
          <div class="input-group">
            <div class="form-floating">
              <input type="date"
                     class="form-control"
                     id="startDate"
                     name="timestamp_after"
                     value="{{ filter.form.timestamp.value.0 }}">
              <label for="startDate">Start Date</label>
            </div>
            <div class="form-floating">
              <input type="date"
                     class="form-control"
                     id="endDate"
                     name="timestamp_before"
                     value="{{ filter.form.timestamp.value.1 }}">
              <label for="endDate">End Date</label>
            </div>
          </div>
        </div>

        <div class="col-6 col-sm-auto dropdown d-grid">
          <button type="button"
                  class="btn btn-outline-secondary btn-lg dropdown-toggle"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  aria-expanded="false">Doors</button>
          <div class="dropdown-menu py-0">
            <div class="dropdown-header">Use Ctrl/Shift to select multiple</div>
            <select class="form-select"
                    aria-label="Door"
                    name="{{ filter.form.door.name }}"
                    id="id_door"
                    size="{{ filter.form.door.subwidgets|length }}"
                    multiple>
              {% for widget in filter.form.door.subwidgets %}{{ widget }}{% endfor %}
            </select>
          </div>
        </div>

        <div class="col-6 col-sm-auto">
          <div class="form-floating">
            <input type="number"
                   class="form-control"
                   id="itemsPerPage"
                   name="items_per_page"
                   value="{{ items_per_page }}"
                   min="10"
                   max="200"
                   step="10"
                   size="10"
                   style="min-width: 9em"
                   required>
            <label for="itemsPerPage">Items Per Page</label>
          </div>
        </div>

        <div class="btn-group col-auto" role="group" aria-label="Form Controls">
          <button type="submit" class="btn btn-sm btn-primary">Submit</button>
          <a href="?" class="btn btn-sm btn-warning">Reset</a>
        </div>

        <div class="col-auto">{% include "cmsmanage/components/download_table.dj.html" %}</div>
      </div>
    </form>

    {% render_table table %}
  </div>
{% endblock %}