{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm">
        {% with staff_nav_active="invites" %}
          {% include "partials/staff_sidebar.html" %}
        {% endwith %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": "Staff", "href": "/staff"},
            {"name": "Invites"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
          <h1 class="h3 mb-1">Invite links</h1>
          <p class="text-muted mb-0">Create and manage signup invites for new users.</p>
        </div>
        <a class="btn btn-primary" href="/staff/invites/new">Create invite</a>
      </div>
      {% if notice %}
        <div class="alert alert-success">{{ notice }}</div>
      {% endif %}
      {% if error %}
        <div class="alert alert-danger">{{ error }}</div>
      {% endif %}
      <div class="card shadow-sm">
        <div class="card-body">
          <form class="row g-2 align-items-end mb-3" method="get" action="/staff/invites" id="staff-invite-filters">
            <input type="hidden" name="sort" id="staff-invite-sort" value="{{ query.sort | default('-created', true) }}">
            <div class="col-12 col-lg-4">
              <label class="form-label" for="staff-invite-search">Search</label>
              <input class="form-control" id="staff-invite-search" name="search" type="text" value="{{ query.search | default('', true) }}" placeholder="UUID, email, creator, or accepted user">
            </div>
            <div class="col-12 col-md-4 col-lg-2">
              <label class="form-label" for="staff-invite-status">Status</label>
              <select class="form-select" id="staff-invite-status" name="status">
                <option value="" {% if query.status is none %}selected{% endif %}>All</option>
                <option value="pending" {% if query.status == "pending" %}selected{% endif %}>Pending</option>
                <option value="accepted" {% if query.status == "accepted" %}selected{% endif %}>Accepted</option>
                <option value="expired" {% if query.status == "expired" %}selected{% endif %}>Expired</option>
              </select>
            </div>
            <div class="col-12 col-md-4 col-lg-3">
              <label class="form-label" for="staff-invite-sort-field">Sort</label>
              <div class="input-group">
                {% set sort_value = query.sort | default('-created', true) %}
                <select class="form-select" id="staff-invite-sort-field" name="sort_field">
                  <option value="created" {% if sort_value == "created" or sort_value == "-created" %}selected{% endif %}>Created</option>
                  <option value="accepted" {% if sort_value == "accepted" or sort_value == "-accepted" %}selected{% endif %}>Accepted</option>
                  <option value="expires" {% if sort_value == "expires" or sort_value == "-expires" %}selected{% endif %}>Expires</option>
                </select>
                <button
                  class="btn btn-outline-secondary"
                  id="staff-invite-sort-direction"
                  type="button"
                  data-direction="{% if sort_value == 'created' or sort_value == 'accepted' or sort_value == 'expires' %}asc{% else %}desc{% endif %}"
                  aria-label="{% if sort_value == 'created' or sort_value == 'accepted' or sort_value == 'expires' %}Ascending{% else %}Descending{% endif %}"
                >
                  {% if sort_value == 'created' or sort_value == 'accepted' or sort_value == 'expires' %}&uarr;{% else %}&darr;{% endif %}
                </button>
              </div>
            </div>
            {% with search_reset_url="/staff/invites", search_actions_col_class="col-12 col-md-4 col-lg-3" %}
              {% include "partials/search_actions.html" %}
            {% endwith %}
          </form>
          {% if page.results | length == 0 %}
            <p class="text-muted mb-0">No invites found.</p>
          {% else %}
            <div class="table-responsive">
              <table class="table table-hover table-sm align-middle mb-0">
                <thead class="table-light">
                  <tr class="text-uppercase small text-muted">
                    <th>Invite</th>
                    <th>Status</th>
                    <th>Creator</th>
                    <th>Accepted user</th>
                    <th>Created</th>
                    <th>Expires</th>
                    <th>Accepted</th>
                  </tr>
                </thead>
                <tbody>
                  {% for invite in page.results %}
                    <tr>
                      <td>
                        <div class="fw-semibold">
                          <a class="text-decoration-none" href="/staff/invites/{{ invite.uuid }}">{{ invite.email | default("Open invite", true) }}</a>
                        </div>
                        <div class="small font-monospace text-muted">{{ invite.uuid }}</div>
                      </td>
                      <td>
                        <span class="badge {{ invite.status_badge_class }}">{{ invite.status_label }}</span>
                      </td>
                      <td>
                        {% with user_link_href = invite.created_by_href, user_link_username = invite.created_by_username, user_link_label = invite.created_by_name | display_name(invite.created_by_username), user_link_class = "text-decoration-none" %}
                          {% include "partials/hover_card_user_link.html" %}
                        {% endwith %}
                      </td>
                      <td>
                        {% if invite.accepted_user_href and invite.accepted_user_username and invite.accepted_user_name %}
                          {% with user_link_href = invite.accepted_user_href, user_link_username = invite.accepted_user_username, user_link_label = invite.accepted_user_name | display_name(invite.accepted_user_username), user_link_class = "text-decoration-none" %}
                            {% include "partials/hover_card_user_link.html" %}
                          {% endwith %}
                          {% if invite.accepted_user_email %}
                            <div class="small text-muted">{{ invite.accepted_user_email }}</div>
                          {% endif %}
                        {% else %}
                          <span class="text-muted small">Not accepted</span>
                        {% endif %}
                      </td>
                      <td title="{{ invite.created_at }}">{{ invite.created_at | humantime }}</td>
                      <td title="{{ invite.expires_at }}">{{ invite.expires_at | humantime }}</td>
                      <td title="{{ invite.accepted_at }}">
                        {% if invite.accepted_at %}
                          {{ invite.accepted_at | humantime }}
                        {% else %}
                          <span class="text-muted small">Not accepted</span>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
        {% with page=page, query=query, per_page_id="staff-invites-per-page", per_page_form="staff-invite-filters" %}
          {% include "partials/paging_footer.html" %}
        {% endwith %}
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      var $form = $("#staff-invite-filters");
      var $sortField = $("#staff-invite-sort-field");
      var $sortValue = $("#staff-invite-sort");
      var $sortDirection = $("#staff-invite-sort-direction");
      if (!$form.length || !$sortField.length || !$sortValue.length || !$sortDirection.length) return;

      function syncSort() {
        var direction = $sortDirection.attr("data-direction") === "asc" ? "asc" : "desc";
        $sortValue.val(direction === "desc" ? "-" + $sortField.val() : $sortField.val());
        $sortDirection.html(direction === "desc" ? "&darr;" : "&uarr;");
        $sortDirection.attr("aria-label", direction === "desc" ? "Descending" : "Ascending");
      }

      $sortField.on("change", function () {
        syncSort();
        $form[0].requestSubmit();
      });
      $sortDirection.on("click", function () {
        $sortDirection.attr("data-direction",
          $sortDirection.attr("data-direction") === "desc" ? "asc" : "desc");
        syncSort();
        $form[0].requestSubmit();
      });
      syncSort();
    })();

    PearingScripts.initAutoSubmitFilters("staff-invite-filters", {
      includeFormAttribute: true
    });
  </script>
{% endblock %}