{# pages/profile/profile.html — user profile #}
{% extends "base.html" %}

{% block title %}Profile — {{ title | default("Admin") }}{% endblock %}

{% block breadcrumb %}
{{ super() }}
<span class="text-[var(--color-gray-400)]">/</span>
<span class="text-[var(--color-gray-900)] font-medium">Profile</span>
{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-left">
      <h1 class="page-header-title">My Profile</h1>
    </div>
  </div>

  {% if error %}
  <div class="p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
    {{ error }}
  </div>
  {% endif %}

  <form method="post" action="{{ admin_path | default('/admin') }}/profile" class="space-y-6">
    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">

    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
      <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-4">Account Information</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="email" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Email</label>
          <input type="email" id="email" name="email" value="{{ profile_user.email }}" required
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
        <div>
          <label for="full_name" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Full Name</label>
          <input type="text" id="full_name" name="full_name" value="{{ profile_user.full_name | default('') }}"
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Confirm Password</label>
          <input type="password" id="password" name="password" required
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors"
                 placeholder="Enter password to save changes">
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
      <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-2">Security</h2>
      <div class="flex items-center gap-4">
        <a href="{{ admin_path | default('/admin') }}/profile/password"
           class="px-4 py-2 rounded-lg border border-[var(--color-gray-300)] text-sm text-[var(--color-gray-700)] hover:bg-[var(--color-gray-50)] transition-colors">
          Change Password
        </a>
        <a href="{{ admin_path | default('/admin') }}/profile/2fa"
           class="px-4 py-2 rounded-lg border border-[var(--color-gray-300)] text-sm text-[var(--color-gray-700)] hover:bg-[var(--color-gray-50)] transition-colors">
          Two-Factor Authentication
        </a>
      </div>
    </div>

    <div class="sticky bottom-0 bg-white border border-[var(--color-gray-200)] rounded-xl p-4 flex items-center justify-end">
      <button type="submit"
              class="btn-primary px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
        Save Changes
      </button>
    </div>
  </form>
</div>
{% endblock %}