{% 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", "href": "/staff/invites"},
            {"name": invite.uuid}
          ] %}
          {% include "partials/breadcrumbs.html" %}
          <h1 class="h3 mb-1">Invite details</h1>
          <div class="d-flex flex-wrap align-items-center gap-2">
            <span class="badge {{ invite.status_badge_class }}">{{ invite.status_label }}</span>
            <span class="small font-monospace text-muted">{{ invite.uuid }}</span>
          </div>
        </div>
      </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 mb-3">
        <div class="card-body">
          <dl class="row mb-0">
            <dt class="col-sm-3">Email</dt>
            <dd class="col-sm-9">{{ invite.email | default("Open invite", true) }}</dd>
            <dt class="col-sm-3">Signup link</dt>
            <dd class="col-sm-9">
              <a class="font-monospace text-break text-decoration-none" href="{{ invite.signup_url }}">{{ invite.signup_url }}</a>
            </dd>
            <dt class="col-sm-3">Created by</dt>
            <dd class="col-sm-9">
              {% 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 %}
            </dd>
            <dt class="col-sm-3">Created</dt>
            <dd class="col-sm-9" title="{{ invite.created_at }}">{{ invite.created_at | humantime }}</dd>
            <dt class="col-sm-3">Expires</dt>
            <dd class="col-sm-9" title="{{ invite.expires_at }}">{{ invite.expires_at | humantime }}</dd>
            <dt class="col-sm-3">Accepted</dt>
            <dd class="col-sm-9">
              {% if invite.accepted_at %}
                <div title="{{ invite.accepted_at }}">{{ invite.accepted_at | humantime }}</div>
                {% if invite.accepted_user_href and invite.accepted_user_username and invite.accepted_user_name %}
                  <div>
                    {% 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 %}
                  </div>
                  {% if invite.accepted_user_email %}
                    <div class="small text-muted">{{ invite.accepted_user_email }}</div>
                  {% endif %}
                {% endif %}
              {% else %}
                <span class="text-muted">Not accepted</span>
              {% endif %}
            </dd>
          </dl>
        </div>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div class="text-uppercase text-muted small fw-semibold">Edit invite</div>
            <form method="post" action="/staff/invites/{{ invite.uuid }}/delete" data-confirm-modal="confirm-delete-invite" data-confirm-name="{{ invite.email | default(invite.uuid, true) }}">
              <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
              <button class="btn btn-outline-danger btn-sm" type="submit">Delete invite</button>
            </form>
          </div>
          <form method="post" action="/staff/invites/{{ invite.uuid }}">
            <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
            <div class="row g-3">
              <div class="col-12 col-lg-6">
                <label class="form-label" for="invite-email">Email</label>
                <input class="form-control" id="invite-email" type="email" name="email" value="{{ form.email }}" placeholder="Optional locked signup email">
              </div>
              <div class="col-12 col-lg-3">
                <label class="form-label" for="invite-expires-in">Reset expiry</label>
                <select class="form-select" id="invite-expires-in" name="expires_in">
                  <option value="1h" {% if form.expires_in == "1h" %}selected{% endif %}>1 hour</option>
                  <option value="1d" {% if form.expires_in == "1d" %}selected{% endif %}>1 day</option>
                  <option value="3d" {% if form.expires_in == "3d" %}selected{% endif %}>3 days</option>
                </select>
                <div class="form-text">Saving applies a new expiry from now.</div>
              </div>
            </div>
            <div class="d-flex flex-wrap gap-2 mt-4">
              <button class="btn btn-primary" type="submit">Save invite</button>
              <a class="btn btn-outline-secondary" href="/staff/invites">Back to invites</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  {% with
    modal_id="confirm-delete-invite",
    modal_title="Delete invite",
    modal_body='Delete <span class="fw-semibold" data-confirm-name></span>?',
    modal_confirm_text="Delete invite",
    modal_desc="This removes the invite from the active list and prevents future signup use."
  %}
    {% include "partials/confirm_modal.html" %}
  {% endwith %}
{% endblock %}