{% extends 'dashboard/base.html' %}
{% block title %}Settings{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-5">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Settings</h1>
        <p class="text-sm text-gray-600 mt-1">Manage your profile, security preferences, and account actions.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <section class="lg:col-span-2">
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <div class="px-5 py-3 border-b border-gray-200">
                    <h2 class="text-base font-semibold text-gray-900">Account Details</h2>
                </div>

                <form method="post" class="p-5 space-y-6">
                    {% csrf_token %}
                    {% if user_form.non_field_errors %}
                    <div class="mb-3 text-sm text-red-600">{{ user_form.non_field_errors }}</div>
                    {% endif %}

                    <section>
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Personal Information</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="form-group">
                                <label class="form-label">First name</label>
                                {{ user_form.first_name }}
                                {% if user_form.first_name.errors %}<div class="text-sm text-red-600 mt-1">{{ user_form.first_name.errors|join:", " }}</div>{% endif %}
                            </div>
                            <div class="form-group">
                                <label class="form-label">Last name</label>
                                {{ user_form.last_name }}
                                {% if user_form.last_name.errors %}<div class="text-sm text-red-600 mt-1">{{ user_form.last_name.errors|join:", " }}</div>{% endif %}
                            </div>
                            <div class="form-group md:col-span-2">
                                <label class="form-label">Email</label>
                                {{ user_form.email }}
                                {% if user_form.email.errors %}<div class="text-sm text-red-600 mt-1">{{ user_form.email.errors|join:", " }}</div>{% endif %}
                            </div>
                        </div>
                    </section>

                    <section>
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Security</h3>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gray-50">
                            <label class="form-label">Two-Factor Authentication</label>
                            <label for="twofa" class="flex items-center gap-3 w-fit cursor-pointer">
                                <input type="checkbox" name="two_factor_enabled" id="twofa" {% if user_form.two_factor_enabled.value %}checked{% endif %}>
                                <span class="text-body">Enable 2FA</span>
                            </label>
                            <div class="form-hint mt-1">When enabled, login requires a one-time code sent to your email.</div>
                        </div>
                    </section>

                    <section>
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Profile</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="form-group">
                                <label class="form-label">Company</label>
                                {{ profile_form.company }}
                                {% if profile_form.company.errors %}<div class="text-sm text-red-600 mt-1">{{ profile_form.company.errors|join:", " }}</div>{% endif %}
                            </div>
                            <div class="form-group">
                                <label class="form-label">Role</label>
                                {{ profile_form.role }}
                                {% if profile_form.role.errors %}<div class="text-sm text-red-600 mt-1">{{ profile_form.role.errors|join:", " }}</div>{% endif %}
                            </div>
                            <div class="form-group md:col-span-2">
                                <label class="form-label">Website</label>
                                {{ profile_form.website }}
                                {% if profile_form.website.errors %}<div class="text-sm text-red-600 mt-1">{{ profile_form.website.errors|join:", " }}</div>{% endif %}
                            </div>
                            <div class="form-group md:col-span-2">
                                <label class="form-label">Address</label>
                                {{ profile_form.address }}
                                {% if profile_form.address.errors %}<div class="text-sm text-red-600 mt-1">{{ profile_form.address.errors|join:", " }}</div>{% endif %}
                            </div>
                            <div class="form-group md:col-span-2">
                                <label class="form-label">Bio</label>
                                {{ profile_form.bio }}
                                {% if profile_form.bio.errors %}<div class="text-sm text-red-600 mt-1">{{ profile_form.bio.errors|join:", " }}</div>{% endif %}
                            </div>
                        </div>
                    </section>

                    <div class="pt-2">
                        <button class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors" type="submit">
                            Save changes
                        </button>
                    </div>
                </form>
            </div>
        </section>

        <aside class="space-y-5">
            <div class="bg-white border border-gray-200 rounded-lg p-5">
                <h3 class="text-base font-semibold text-gray-900 mb-3">Quick Actions</h3>
                <div class="space-y-2">
                    <a href="{% url 'change-password' %}" class="block w-full px-3 py-2 text-sm text-gray-700 bg-gray-50 hover:bg-gray-100 rounded border border-gray-200 transition-colors">Change password</a>
                    <a href="{% url 'applications' %}" class="block w-full px-3 py-2 text-sm text-gray-700 bg-gray-50 hover:bg-gray-100 rounded border border-gray-200 transition-colors">Applications</a>
                    <a href="{% url 'support' %}" class="block w-full px-3 py-2 text-sm text-gray-700 bg-gray-50 hover:bg-gray-100 rounded border border-gray-200 transition-colors">Support</a>
                </div>
            </div>

            <div class="bg-white border border-gray-200 rounded-lg p-5">
                <h3 class="text-base font-semibold mb-3">Security Checklist</h3>
                <ul class="space-y-2.5 text-sm text-gray-600">
                    <li class="flex items-start gap-2">
                        <span class="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
                        Use a strong, unique password
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
                        Keep 2FA enabled on active accounts
                    </li>
                    <li class="flex items-start gap-2">
                        <span class="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
                        Review connected apps regularly
                    </li>
                </ul>
            </div>

            <div class="bg-white border border-red-200 rounded-lg p-5">
                <h3 class="text-base font-semibold text-red-700 mb-2">Danger Zone</h3>
                <p class="text-sm text-gray-600 mb-3">This action is permanent and cannot be undone.</p>
                <a href="{% url 'delete-account' %}" class="inline-flex items-center px-4 py-2 text-sm font-medium text-red-700 bg-red-50 hover:bg-red-100 border border-red-300 rounded-lg transition-colors">
                    Delete account
                </a>
            </div>
        </div>
    </div>
</main>
{% endblock %}