{% extends "./base.html" %}
{% block plannedmaintenance_main %}
  <div class="flex flex-col gap-4 max-w-6xl w-full">
    <div class="flex justify-between items-center">
      <div role="tablist" class="tabs tabs-box tabs-primary">
        <a role="tab"
           class="tab {% if current_tab == 'upcoming' %}tab-active{% endif %}"
           href="{% url 'htmx:plannedmaintenance-list' tab='upcoming' %}">Upcoming</a>
        <a role="tab"
           class="tab {% if current_tab == 'past' %}tab-active{% endif %}"
           href="{% url 'htmx:plannedmaintenance-list' tab='past' %}">Past</a>
      </div>
      {% if request.user.is_staff %}
        <a class="btn btn-primary"
           href="{% url 'htmx:plannedmaintenance-create' %}">Create new</a>
      {% endif %}
    </div>
    <table class="border border-separate border-spacing-1 border-primary table {% if preferences.argus_htmx.incidents_table_layout_compact %}table-xs{% endif %}">
      <thead>
        <tr class="border-b border-primary bg-base-100">
          <th class="border-b border-primary">Status</th>
          <th class="border-b border-primary">Time Window</th>
          <th class="border-b border-primary">Description</th>
          <th class="border-b border-primary">Filters</th>
          <th class="border-b border-primary">Created by</th>
          <th class="border-b border-primary text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for task in object_list %}
          <tr class="group">
            <td class="border-b border-neutral-content group-last:border-b-0 whitespace-nowrap">
              {% if task.current %}
                <span class="badge badge-success">Ongoing</span>
              {% elif task.future %}
                <span class="badge badge-info">Scheduled</span>
              {% else %}
                <span class="badge badge-ghost">Completed</span>
              {% endif %}
            </td>
            <td class="border-b border-neutral-content group-last:border-b-0 whitespace-nowrap">
              <div class="flex flex-col">
                <span>{{ task.start_time|date:preferences.argus_htmx.datetime_format }}</span>
                {% if task.end_time.year >= 9999 %}
                  <span class="text-base-content/60">to now</span>
                {% else %}
                  <span class="text-base-content/60">to {{ task.end_time|date:preferences.argus_htmx.datetime_format }}</span>
                {% endif %}
              </div>
            </td>
            <td class="border-b border-neutral-content group-last:border-b-0">{{ task.description|default:"-" }}</td>
            <td class="border-b border-neutral-content group-last:border-b-0">
              <div class="flex flex-wrap gap-1">
                {% for filter in task.filters.all %}
                  <span class="badge badge-primary text-xs whitespace-nowrap">{{ filter.name }}</span>
                {% empty %}
                  <span class="text-base-content/60">None</span>
                {% endfor %}
              </div>
            </td>
            <td class="border-b border-neutral-content group-last:border-b-0">{{ task.created_by }}</td>
            <td class="border-b border-neutral-content group-last:border-b-0 text-right overflow-visible">
              <div class="flex gap-1 justify-end">
                {% if request.user.is_staff and task.modifiable %}
                  <a href="{% url 'htmx:plannedmaintenance-update' pk=task.pk %}"
                     class="btn btn-sm btn-ghost">Edit</a>
                {% else %}
                  <a href="{% url 'htmx:plannedmaintenance-detail' pk=task.pk %}"
                     class="btn btn-sm btn-ghost">View</a>
                {% endif %}
                {% if request.user.is_staff %}
                  <div class="dropdown dropdown-end">
                    <button tabindex="0" class="btn btn-sm btn-ghost btn-square">
                      <svg xmlns="http://www.w3.org/2000/svg"
                           class="h-4 w-4"
                           viewBox="0 0 20 20"
                           fill="currentColor">
                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                      </svg>
                    </button>
                    <ul tabindex="0"
                        class="dropdown-content z-[50] menu menu-sm p-2 shadow bg-base-100 rounded-box w-max border border-base-300">
                      <li>
                        <a href="{% url 'htmx:plannedmaintenance-create' %}?copy_from={{ task.pk }}">
                          <i class="fa-regular fa-copy" aria-hidden="true"></i> Create copy
                        </a>
                      </li>
                      {% if task.modifiable %}
                        {% if task.current %}
                          <li>
                            <button type="button"
                                    onclick="document.getElementById('end-dialog-{{ task.pk }}').showModal()">
                              <i class="fa-regular fa-circle-stop" aria-hidden="true"></i> End now
                            </button>
                          </li>
                        {% elif task.future %}
                          <li>
                            <button type="button"
                                    class="text-error"
                                    onclick="document.getElementById('delete-dialog-{{ task.pk }}').showModal()">
                              <i class="fa-regular fa-trash-can" aria-hidden="true"></i> Delete
                            </button>
                          </li>
                        {% endif %}
                      {% endif %}
                    </ul>
                  </div>
                  {% if task.modifiable %}
                    {% if task.current %}
                      {% include "./_cancel_confirm_dialog.html" with task=task %}
                    {% elif task.future %}
                      {% include "./_delete_confirm_dialog.html" with task=task %}
                    {% endif %}
                  {% endif %}
                {% endif %}
              </div>
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="6" class="text-center text-base-content/60 py-4">
              {% if current_tab == 'past' %}
                No past maintenance tasks
              {% else %}
                No upcoming maintenance tasks
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock plannedmaintenance_main %}