{% extends "layouts/base.html" %}

{% block main_content %}
<!-- Enhanced Page Header -->
{% set breadcrumbs = [
    {"name": t('nav.settings'), "url": "/settings", "icon": "fas fa-cog"},
    {"name": t('settings.profile'), "icon": "fas fa-user"}
] %}
{% set header_title = t('settings.profile') %}
{% set header_subtitle = t('settings.profile') %}
{% set header_icon = "fas fa-user" %}
{% include "components/page_header.html" %}

<div class="max-w-3xl mx-auto space-y-6">

    <!-- Profile Form -->
    <div class="bg-white shadow rounded-lg">
        <form method="POST" action="/profile">
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700">
                            First Name
                        </label>
                        <div class="mt-1">
                            <input type="text" name="first_name" id="first_name" 
                                   value="{{ user.first_name }}"
                                   class="form-input">
                        </div>
                    </div>

                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700">
                            Last Name
                        </label>
                        <div class="mt-1">
                            <input type="text" name="last_name" id="last_name" 
                                   value="{{ user.last_name }}"
                                   class="form-input">
                        </div>
                    </div>

                    <div class="sm:col-span-2">
                        <label for="email" class="block text-sm font-medium text-gray-700">
                            Email Address
                        </label>
                        <div class="mt-1">
                            <input type="email" name="email" id="email" 
                                   value="{{ user.email }}"
                                   class="form-input" readonly>
                        </div>
                        <p class="mt-1 text-sm text-gray-500">
                            Email address cannot be changed. Contact your administrator if needed.
                        </p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="submit" class="btn-primary sm:ml-3">
                    <i class="fas fa-save mr-2"></i>
                    Save Changes
                </button>
                <a href="/settings" class="btn-secondary mt-3 sm:mt-0">
                    <i class="fas fa-times mr-2"></i>
                    Cancel
                </a>
            </div>
        </form>
    </div>

    <!-- Account Security -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Account Security</h3>
            <p class="mt-1 text-sm text-gray-500">
                Manage your password and security settings
            </p>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h4 class="text-sm font-medium text-gray-900">Password</h4>
                        <p class="text-sm text-gray-500">Last changed recently</p>
                    </div>
                    <button class="btn-secondary">
                        <i class="fas fa-key mr-2"></i>
                        Change Password
                    </button>
                </div>
                
                <div class="flex items-center justify-between">
                    <div>
                        <h4 class="text-sm font-medium text-gray-900">Two-Factor Authentication</h4>
                        <p class="text-sm text-gray-500">Add an extra layer of security</p>
                    </div>
                    <button class="btn-secondary">
                        <i class="fas fa-shield-alt mr-2"></i>
                        Enable 2FA
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}