{% extends "tickets/base.html" %}

{% block content %}
  <h1 class="fw-bold">Lists</h1>

  {% if user.is_staff or user.is_superuser %}
    <button type="button" data-bs-toggle="modal" data-bs-target="#ticket_list-create-modal" class="btn btn-primary">
      <i class="fa-solid fa-plus pe-1"></i>
      New List
    </button>
    <hr>

    <!--List create modal-->
    <div class="modal fade" id="ticket_list-create-modal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">
              <i class="fa-solid fa-plus pe-1"></i>
              New List
          </div>
          <div class="modal-body">
            <form id="ticket_list-create-form" action="{% url 'tickets:ticket_list_create' %}" method="post">
              {% include 'tickets/include/form.html' %}
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
              <i class="fa-solid fa-xmark pe-1"></i>
              Close
            </button>
            <button class="btn btn-primary" type="submit" form="ticket_list-create-form">
              <i class="fa-solid fa-check pe-1"></i>
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  {% if ticket_lists %}
    {% regroup ticket_lists by group as section_ticket_list %}
    {% for group in section_ticket_list %}
      <h3>{{ group.grouper }}</h3>
      <ul class="list-group mb-4">
        {% for ticket_list in group.list %}
          <li class="list-group-item d-flex align-items-center justify-content-between">
            <a href="{% url 'tickets:ticket_list_detail' ticket_list.pk %}">{{ ticket_list.name }}</a>
          </li>
        {% endfor %}
      </ul>
    {% endfor %}
  {% else %}
    <h4>There are no Lists!</h4>
  {% endif %}
{% endblock %}