{% extends 'backlogger/base.html' %}

{% block title %}Profile — Backlogger{% endblock %}

{% block styles %}
<style>
  .container { max-width: 520px; margin: 0 auto; padding: 2.5rem 2rem; }

  h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
  .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 2rem; }

  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 10px; padding: 1.5rem; }

  .field { margin-bottom: 1.25rem; }
  .field:last-of-type { margin-bottom: 0; }
  .field label { font-size: 0.82rem; }
  /* Profile uses a slightly darker input background than the default */
  .field input[type="text"], .field select { background: #0f172a; }

  .field-static { font-size: 0.9rem; color: #64748b; padding: 0.5rem 0; }

  .divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0; }

  .actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }

  .saved-msg { font-size: 0.82rem; color: #34d399; display: none; }
  .saved-msg.show { display: inline; }

  body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
  body[data-theme="light"] .field input[type="text"],
  body[data-theme="light"] .field select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
  body[data-theme="light"] .divider { border-color: #e2e8f0; }
</style>
{% endblock %}

{% block nav %}
<a href="{% url 'backlogger:list' %}">Backlog</a>
<a href="{% url 'backlogger:profile' %}" style="color:#e2e8f0">Profile</a>
<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
{% endblock %}

{% block content %}
<div class="container">
  <h1>Profile</h1>
  <p class="subtitle">@{{ request.user.username }}{% if request.user.date_joined %} · member since {{ request.user.date_joined|date:"N Y" }}{% endif %}</p>

  <form method="post" id="profile-form">
    {% csrf_token %}
    <div class="card">
      <div class="field">
        <label for="{{ form.display_name.id_for_label }}">{{ form.display_name.label }}</label>
        {{ form.display_name }}
        {% if form.display_name.errors %}<div style="color:#f87171;font-size:0.78rem;margin-top:0.3rem">{{ form.display_name.errors.0 }}</div>{% endif %}
      </div>

      <hr class="divider">

      <div class="field">
        <label for="{{ form.theme.id_for_label }}">{{ form.theme.label }}</label>
        {{ form.theme }}
      </div>
    </div>

    <div class="actions">
      <button type="submit" class="btn btn-primary">Save</button>
      <a href="{% url 'backlogger:list' %}" class="btn btn-outline">Back to backlog</a>
    </div>
  </form>
</div>
{% endblock %}