{% 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">
  <section class="col-lg-6">
    <div class="card item-card shadow-sm"><div class="card-body">
      <h1 class="h4 mb-3">{% trans "User settings" %}</h1>
      <form method="post" class="vstack gap-3">
        {% csrf_token %}<input type="hidden" name="action" value="profile">
        <div><label class="form-label">{% trans "First name" %}</label>{{ profile_form.first_name }}</div>
        <div><label class="form-label">{% trans "Last name" %}</label>{{ profile_form.last_name }}</div>
        <div><label class="form-label">{% trans "Email" %}</label>{{ profile_form.email }}</div>
        <button class="btn btn-dark">{% trans "Save" %}</button>
      </form>
    </div></div>
  </section>
  <section class="col-lg-6">
    <div class="card item-card shadow-sm mb-3"><div class="card-body">
      <h2 class="h5 mb-3">{% trans "Default view" %}</h2>
      <form method="post" class="vstack gap-2">
        {% csrf_token %}<input type="hidden" name="action" value="preferences">
        {% for field in preference_form %}
          {% if field.field.widget.input_type == 'checkbox' %}
            <label class="form-check"><input class="form-check-input" type="checkbox" name="{{ field.name }}" {% if field.value %}checked{% endif %}> <span class="form-check-label">{{ field.label }}</span></label>
          {% else %}
            <div><label class="form-label">{{ field.label }}</label>{{ field }}</div>
          {% endif %}
        {% endfor %}
        <button class="btn btn-dark mt-2">{% trans "Save default view" %}</button>
      </form>
    </div></div>
    <div class="card item-card shadow-sm mb-3"><div class="card-body">
      <h2 id="teams" class="h5 mb-3">{% trans "Teams" %}</h2>
      <form method="post" class="vstack gap-3 mb-3">
        {% csrf_token %}<input type="hidden" name="action" value="team">
        <div><label class="form-label">{% trans "Team name" %}</label>{{ team_form.name }}</div>
        <div><label class="form-label">{% trans "Team tag" %}</label><div class="small text-muted mb-2">{% trans "This tag automatically turns items into team items, e.g. #my2dos." %}</div>{{ team_form.slug }}</div>
        <button class="btn btn-dark">{% trans "Create team" %}</button>
      </form>
      <div class="vstack gap-2">
        {% for team in teams %}<a class="border rounded p-2 text-decoration-none" href="{% url 'team_detail' team.id %}"><strong>{{ team.name }}</strong> <span class="text-muted">#{{ team.slug }}</span></a>{% empty %}<span class="text-muted">{% trans "No teams yet." %}</span>{% endfor %}
      </div>
    </div></div>
    <div class="card item-card shadow-sm mb-3"><div class="card-body">
      <h2 class="h5 mb-3">{% trans "Create API key" %}</h2>
      <form method="post" class="vstack gap-3">
        {% 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">{% trans "Generate API key" %}</button>
      </form>
    </div></div>
    <div class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h5 mb-3">{% trans "API keys" %}</h2>
      <div class="vstack gap-2">
        {% for key in api_keys %}
          <div class="border rounded p-2">
            <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 %}