{% extends 'core/base.html' %}
{% load i18n %}
{% block content %}
<a class="btn btn-sm btn-outline-secondary mb-3" href="/">← {% trans "back" %}</a>
<div class="row g-4 align-items-start">
  <aside class="col-lg-3">
    <div class="card item-card shadow-sm sticky-lg-top" style="top:5rem"><div class="card-body">
      <h1 class="h5 mb-3">{% trans "Settings" %}</h1>
      <nav class="nav nav-pills flex-column gap-1">
        <a class="nav-link" href="#profile">{% trans "Profile" %}</a>
        <a class="nav-link" href="#preferences">{% trans "View & language" %}</a>
        <a class="nav-link" href="#invites">{% trans "Invitations" %}</a>
        <a class="nav-link" href="#api">{% trans "API keys" %}</a>
      </nav>
    </div></div>
  </aside>

  <section class="col-lg-9 vstack gap-4">
    <div id="profile" class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h4 mb-1">{% trans "Profile" %}</h2>
      <p class="text-muted small mb-3">{% trans "Manage your personal user data." %}</p>
      <form method="post" class="row g-3">
        {% csrf_token %}<input type="hidden" name="action" value="profile">
        <div class="col-md-6"><label class="form-label">{% trans "First name" %}</label>{{ profile_form.first_name }}</div>
        <div class="col-md-6"><label class="form-label">{% trans "Last name" %}</label>{{ profile_form.last_name }}</div>
        <div class="col-12"><label class="form-label">{% trans "Email" %}</label>{{ profile_form.email }}</div>
        <div class="col-12"><button class="btn btn-dark">{% trans "Save profile" %}</button></div>
      </form>
    </div></div>

    <div id="preferences" class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h4 mb-1">{% trans "View & language" %}</h2>
      <p class="text-muted small mb-3">{% trans "Choose your language and configure the default overview." %}</p>
      <form method="post" class="vstack gap-3">
        {% csrf_token %}<input type="hidden" name="action" value="preferences">
        <div class="row g-3">
          {% for field in preference_form %}
            {% if field.name == 'language' or field.name == 'default_item_kind' or field.name == 'overview_lines' %}
              <div class="col-12"><label class="form-label">{{ field.label }}</label>{{ field }}</div>
            {% endif %}
          {% endfor %}
          <div class="col-12">
            <div class="form-label mb-2">{% trans "Sorting" %}</div>
            <label class="form-check border rounded p-3"><input class="form-check-input" type="checkbox" name="due_first" {% if preference_form.due_first.value %}checked{% endif %}> <span class="form-check-label fw-semibold">{{ preference_form.due_first.label }}</span><div class="small text-muted">{% trans "Overdue and due-today tasks are sorted to the top of the overview." %}</div></label>
          </div>
        </div>
        <div>
          <div class="form-label mb-2">{% trans "Show in overview" %}</div>
          <div class="row g-2">
            {% for field in preference_form %}
              {% if field.field.widget.input_type == 'checkbox' and field.name != 'due_first' %}
                <div class="col-md-6"><label class="form-check border rounded p-2 ps-4 h-100"><input class="form-check-input" type="checkbox" name="{{ field.name }}" {% if field.value %}checked{% endif %}> <span class="form-check-label">{{ field.label }}</span></label></div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
        <div><button class="btn btn-dark">{% trans "Save view settings" %}</button></div>
      </form>
    </div></div>

    <div id="invites" class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h4 mb-1">{% trans "User invitations" %}</h2>
      <p class="text-muted small mb-3">{% trans "Invite new users during the test phase. Only people with an invitation link can register." %}</p>
      <form method="post" class="row g-3 mb-4">
        {% csrf_token %}<input type="hidden" name="action" value="userinvite">
        <div class="col-md-8"><label class="form-label">{% trans "Email" %}</label>{{ user_invite_form.email }}</div>
        <div class="col-md-4 d-flex align-items-end"><button class="btn btn-dark w-100">{% trans "Create invitation link" %}</button></div>
      </form>
      <div class="vstack gap-2">
        {% for invite in user_invites %}<div id="invite-{{ invite.id }}" class="border rounded p-3"><div class="d-flex justify-content-between gap-2"><strong>{{ invite.email }}</strong><form method="post" action="{% url 'delete_user_invite' invite.id %}" hx-post="{% url 'delete_user_invite' invite.id %}" hx-target="#invite-{{ invite.id }}" hx-swap="outerHTML">{% csrf_token %}<button class="btn btn-sm btn-outline-danger">{% trans "Delete" %}</button></form></div><code class="small user-select-all">{{ request.scheme }}://{{ request.get_host }}{% url 'accept_user_invite' invite.token %}</code></div>{% empty %}<span class="text-muted">{% trans "No open invitations." %}</span>{% endfor %}
      </div>
    </div></div>

    <div id="api" class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h4 mb-1">{% trans "API keys" %}</h2>
      <p class="text-muted small mb-3">{% trans "Create API keys for integrations and optionally restrict them to tags." %}</p>
      <form method="post" class="vstack gap-3 mb-4">
        {% csrf_token %}<input type="hidden" name="action" value="apikey">
        <div><label class="form-label">{% trans "Name" %}</label>{{ key_form.name }}</div>
        <div><label class="form-label">{% trans "Restrict to tags" %}</label><div class="small text-muted mb-2">{% trans "No selection = access to all own items." %}</div>{{ key_form.tags }}</div>
        <button class="btn btn-dark align-self-start">{% trans "Generate API key" %}</button>
      </form>
      <div class="vstack gap-2">
        {% for key in api_keys %}
          <div class="border rounded p-3">
            <div class="d-flex justify-content-between gap-2"><strong>{{ key.name }}</strong><form method="post" action="{% url 'delete_api_key' key.id %}">{% csrf_token %}<button class="btn btn-sm btn-outline-danger">{% trans "Delete" %}</button></form></div>
            <code class="small user-select-all">{{ key.token }}</code>
            <div class="small text-muted">{% trans "Tags" %}: {% for tag in key.tags.all %}#{{ tag.name }} {% empty %}{% trans "all" %}{% endfor %}</div>
          </div>
        {% empty %}<span class="text-muted">{% trans "No API keys yet." %}</span>{% endfor %}
      </div>
    </div></div>
  </section>
</div>
{% endblock %}