{% 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="teams" %}
          {% 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": "Teams", "href": "/staff/teams"},
            {"name": "Create"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
          <h1 class="h3 mb-0">Create team</h1>
        </div>
      </div>
      {% include "partials/flash.html" %}
      <div class="card shadow-sm">
        <div class="card-body">
          <form method="post" action="/staff/teams/new" autocomplete="off">
            <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label" for="create-team-name">Name</label>
                <input
                  class="form-control"
                  id="create-team-name"
                  name="name"
                  type="text"
                  value="{{ form.name }}"
                  placeholder="Team name"
                  required
                  data-slugify-source="create-team-name"
                  data-slugify-target="create-team-slug"
                >
                <div class="form-text">The display name shown across the team pages.</div>
              </div>
              <div class="col-12">
                <label class="form-label" for="create-team-slug">Slug</label>
                <input
                  class="form-control"
                  id="create-team-slug"
                  name="slug"
                  type="text"
                  value="{{ form.slug }}"
                  placeholder="team-slug"
                  pattern="[A-Za-z0-9-]+"
                  required
                  data-slugify-target="create-team-slug"
                  hx-get="/api/v1/check-team-slug"
                  hx-trigger="input delay:500ms"
                  hx-swap="none"
                  data-slug-check="true"
                  data-slug-feedback="create-team-slug-feedback"
                >
                <div class="form-text">Used in team URLs and API references. Must be unique on the site.</div>
                <div class="form-text" id="create-team-slug-feedback" aria-live="polite"></div>
              </div>
              <div class="col-12">
                <div class="form-check">
                  <input
                    class="form-check-input"
                    id="create-team-active"
                    name="is_active"
                    type="checkbox"
                    value="true"
                    {% if form.is_active %}checked{% endif %}
                  >
                  <label class="form-check-label" for="create-team-active">Active</label>
                  <div class="form-text">Inactive teams are hidden from non-staff.</div>
                </div>
              </div>
            </div>
            <div class="mt-3">
              {% with primary_label="Create team", cancel_href="/staff/teams" %}
                {% include "partials/form_actions.html" %}
              {% endwith %}
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}