{% 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="mb-3">
        {% set breadcrumbs = [
          {"name": "Staff", "href": "/staff"},
          {"name": "Invites", "href": "/staff/invites"},
          {"name": "New"}
        ] %}
        {% include "partials/breadcrumbs.html" %}
        <h1 class="h3 mb-1">Create invite</h1>
        <p class="text-muted mb-0">Create a signup invite for a future user.</p>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">
          {% if error %}
            <div class="alert alert-danger">{{ error }}</div>
          {% endif %}
          <form method="post" action="/staff/invites/new">
            <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 class="form-text">Leave blank to let the invited user choose their email address during signup.</div>
              </div>
              <div class="col-12 col-lg-3">
                <label class="form-label" for="invite-expires-in">Expires in</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>
            </div>
            <div class="d-flex flex-wrap gap-2 mt-4">
              <button class="btn btn-primary" type="submit">Create invite</button>
              <a class="btn btn-outline-secondary" href="/staff/invites">Cancel</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}