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

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

<div class="space-y-6">

    <!-- Settings Navigation -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Profile Settings -->
        <a href="/profile" class="block bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow duration-200">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-user text-2xl text-blue-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('settings.profile') }}</h3>
                        <p class="text-sm text-gray-500">{{ i18n.t('settings.profile') }}</p>
                    </div>
                </div>
            </div>
        </a>

        <!-- API Tokens -->
        <a href="/api-tokens" class="block bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow duration-200">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-key text-2xl text-green-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('settings.api_tokens') }}</h3>
                        <p class="text-sm text-gray-500">{{ i18n.t('tokens.title') }}</p>
                    </div>
                </div>
            </div>
        </a>

        <!-- AI Services -->
        <a href="/ai-services" class="block bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow duration-200">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-robot text-2xl text-purple-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('nav.services') }}</h3>
                        <p class="text-sm text-gray-500">{{ i18n.t('nav.services') }}</p>
                    </div>
                </div>
            </div>
        </a>

        <!-- Language Management -->
        <a href="/settings/language/{{ current_language }}" class="block bg-white overflow-hidden shadow rounded-lg hover:shadow-md transition-shadow duration-200">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-language text-2xl text-orange-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('settings.languages') }}</h3>
                        <p class="text-sm text-gray-500">Manage interface languages and translations</p>
                        <div class="mt-2 flex items-center text-xs text-gray-400">
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                {{ available_languages|length }} {{ i18n.t('settings.languages') }}
                            </span>
                            <span class="ml-2">{{ i18n.t('settings.current_language') }}: {{ available_languages[current_language]['native_name'] }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>

        <!-- Security -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-shield-alt text-2xl text-red-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('settings.security') }}</h3>
                        <p class="text-sm text-gray-500">{{ i18n.t('settings.security') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preferences -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-sliders-h text-2xl text-yellow-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('settings.preferences') }}</h3>
                        <p class="text-sm text-gray-500">{{ i18n.t('settings.preferences') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Export/Import -->
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-download text-2xl text-indigo-600"></i>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-lg font-medium text-gray-900">{{ i18n.t('settings.export_import') }}</h3>
                        <p class="text-sm text-gray-500">{{ i18n.t('settings.import_export') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Account Information -->
    <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">
                <i class="fas fa-info-circle mr-2 text-gray-400"></i>
                {{ i18n.t('settings.account_info') }}
            </h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                <div>
                    <dt class="text-sm font-medium text-gray-500">{{ i18n.t('settings.name') }}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.first_name }} {{ user.last_name }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">{{ i18n.t('settings.email') }}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.email }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">{{ i18n.t('settings.role') }}</dt>
                    <dd class="mt-1 text-sm text-gray-900 capitalize">{{ user.role }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">{{ i18n.t('settings.member_since') }}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ i18n.t('settings.recently') }}</dd>
                </div>
            </dl>
        </div>
    </div>
</div>
{% endblock %}