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

{% block content %}
  {% if my_tickets %}
    <h1 class="fw-bold">My Tickets (in all groups)</h1>
  {% elif assignments %}
    <h1 class="fw-bold">Assignments (in all groups)</h1>
  {% else %}
    <h1>{{ ticket_list.group }} > <b>{{ ticket_list.name }}</b></h1>
    
    <div class="d-flex justify-content-between">
      <button type="button" data-bs-toggle="modal" data-bs-target="#ticket-create-modal" class="btn btn-primary">
        <i class="fa-solid fa-plus pe-1"></i>
        New Ticket
      </button> 
    </div>

    <!--ticket create modal-->
    <div class="modal fade" id="ticket-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 Ticket
          </div>
          <div class="modal-body">
            <form id="ticket-create-form" action="{% url 'tickets:ticket_create' ticket_list.pk %}" 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-create-form">
              <i class="fa-solid fa-check pe-1"></i>
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
  
  <hr>
  {% if tickets %}   
    <div class="overflow-x-scroll">
      <table class="table" id="tickettable">
        <thead>
          <tr class="nodrop">
            <th>ID</th>
            <th>Type</th>
            <th>Title</th>
            <th class="text-nowrap">Created at</th>
            <th class="text-nowrap">Due on</th>
            <th>Owner</th>
            <th>Assigned</th>
            <th>Status</th>
            <th>Priority</th>
          </tr>
        </thead>

        <tbody>
          {% for ticket in tickets %}
            <tr class="ticket" id="{{ ticket.pk }}" data-ticket-type="{{ ticket.get_ticket_type_display }}">
              <td>
                {{ ticket.pk }}
              </td>
              <td>
                {{ ticket.get_ticket_type_display }}
              </td>
              <td>
                <a href="{% url 'tickets:ticket_detail' ticket.pk %}">{{ ticket.title|truncatechars:48 }}</a>
              </td>
              <td>
                  {{ ticket.created_at }}
              </td>
              <td>
                  {{ ticket.due_date }}
              </td>
              <td>
                {{ ticket.created_by_username }}
              </td>
              <td>
                {% if ticket.assigned_to_username %}{{ ticket.assigned_to_username }}{% else %}Anyone{% endif %}
              </td>
              <td>
                {{ ticket.get_status_display }}
              </td>
              <td>
                {{ ticket.priority }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
  {% else %}
    <h4>There are no Tickets!</h4>
  {% endif %}
{% endblock %}