{% extends 'core/base.html' %}
{% block content %}
<a class="btn btn-sm btn-outline-secondary mb-3" href="/">← zurück</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">Benutzereinstellungen</h1>
      <form method="post" class="vstack gap-3">
        {% csrf_token %}<input type="hidden" name="action" value="profile">
        <div><label class="form-label">Vorname</label>{{ profile_form.first_name }}</div>
        <div><label class="form-label">Name</label>{{ profile_form.last_name }}</div>
        <div><label class="form-label">E-Mail</label>{{ profile_form.email }}</div>
        <button class="btn btn-dark">Speichern</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">Standardansicht</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">Standardansicht speichern</button>
      </form>
    </div></div>
    <div class="card item-card shadow-sm mb-3"><div class="card-body">
      <h2 class="h5 mb-3">API Key erzeugen</h2>
      <form method="post" class="vstack gap-3">
        {% csrf_token %}<input type="hidden" name="action" value="apikey">
        <div><label class="form-label">Name</label>{{ key_form.name }}</div>
        <div><label class="form-label">Auf Tags beschränken</label><div class="small text-muted mb-2">Keine Auswahl = Zugriff auf alle eigenen Einträge.</div>{{ key_form.tags }}</div>
        <button class="btn btn-dark">API Key generieren</button>
      </form>
    </div></div>
    <div class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h5 mb-3">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">Löschen</button></form></div>
            <code class="small user-select-all">{{ key.token }}</code>
            <div class="small text-muted">Tags: {% for tag in key.tags.all %}#{{ tag.name }} {% empty %}alle{% endfor %}</div>
          </div>
        {% empty %}<span class="text-muted">Noch keine API Keys.</span>{% endfor %}
      </div>
    </div></div>
  </section>
</div>
{% endblock %}