{% extends "base.html" %}

{% block title %}Profile - {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <h1 class="text-2xl font-bold text-gray-900 mb-6">My Profile</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Profile Information -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">Profile Information</h2>

            <form action="/auth/profile" method="post" hx-post="/auth/profile" hx-target="#profile-result">
                <div class="space-y-4">
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input type="email"
                               id="email"
                               name="email"
                               value="{{ user.email }}"
                               disabled
                               class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500">
                    </div>

                    <div>
                        <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
                        <input type="text"
                               id="first_name"
                               name="first_name"
                               value="{{ user.first_name or '' }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div>
                        <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
                        <input type="text"
                               id="last_name"
                               name="last_name"
                               value="{{ user.last_name or '' }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div id="profile-result"></div>

                    <div>
                        <button type="submit"
                                class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                            Save Changes
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Change Password -->
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">Change Password</h2>

            <form action="/auth/change-password" method="post" hx-post="/auth/change-password" hx-target="#password-result">
                <div class="space-y-4">
                    <div>
                        <label for="current_password" class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
                        <input type="password"
                               id="current_password"
                               name="current_password"
                               required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div>
                        <label for="new_password" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
                        <input type="password"
                               id="new_password"
                               name="new_password"
                               required
                               minlength="8"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div>
                        <label for="new_password_confirm" class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
                        <input type="password"
                               id="new_password_confirm"
                               name="new_password_confirm"
                               required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    </div>

                    <div id="password-result"></div>

                    <div>
                        <button type="submit"
                                class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                            Change Password
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Account Info -->
    <div class="mt-6 bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Account Information</h2>
        <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <dt class="text-sm font-medium text-gray-500">Account Created</dt>
                <dd class="mt-1 text-sm text-gray-900">{{ user.created_at|datetime }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-gray-500">Last Login</dt>
                <dd class="mt-1 text-sm text-gray-900">{{ user.last_login|datetime or "Never" }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-gray-500">Account Status</dt>
                <dd class="mt-1">
                    {% if user.is_active %}
                    <span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">Active</span>
                    {% else %}
                    <span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">Inactive</span>
                    {% endif %}
                </dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-gray-500">Admin Status</dt>
                <dd class="mt-1">
                    {% if user.is_admin %}
                    <span class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full">Admin</span>
                    {% else %}
                    <span class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-full">User</span>
                    {% endif %}
                </dd>
            </div>
        </dl>
    </div>
</div>
{% endblock %}