{% extends "settings/layout.html" %}

{% block settings_content %}
<div class="space-y-6">
  <!-- Display Name Section -->
  <div class="ui-pane">
    <h2 class="ui-section-title">Display Name</h2>
    <p class="ui-section-subtitle">This is how your name appears throughout the application.</p>

    {% if error %}
      <div class="mt-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
        {{ error }}
      </div>
    {% endif %}

    <form class="ui-form-scope mt-6" method="post" action="/settings">
      <div>
        <label class="ui-form-label" for="display_name">Display Name</label>
        <input
          class="ui-form-input mt-2 px-4 py-3"
          type="text"
          name="display_name"
          id="display_name"
          value="{{ user.display_name }}"
          placeholder="Your display name"
          required
          maxlength="255"
        />
      </div>
      <button
        class="mt-4 ui-btn-primary"
        type="submit"
      >
        Save Changes
      </button>
    </form>
  </div>

  <!-- Email Section (Read-only) -->
  <div class="ui-pane">
    <h2 class="ui-section-title">Email Address</h2>
    <p class="ui-section-subtitle">Your email address is used for signing in.</p>

    <div class="mt-4">
      <p class="text-[14px] text-slate-900 dark:text-slate-100">{{ user.email }}</p>
    </div>
  </div>

  <!-- Roles Section (Read-only) -->
  <div class="ui-pane">
    <h2 class="ui-section-title">Assigned Roles</h2>
    <p class="ui-section-subtitle">Your roles determine what you can access in the application.</p>

    <div class="mt-4">
      {% if user.roles %}
        <div class="flex flex-wrap gap-2">
          {% for role in user.roles %}
            <span class="ui-pill ui-pill-blue">
              {{ role.name }}
            </span>
          {% endfor %}
        </div>
      {% else %}
        <p class="text-[14px] text-slate-500 dark:text-slate-400">No roles assigned to your account.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}