{% extends "base.html" %}

{% block title %}{{ t.error_title }}{% endblock %}

{% block content %}
<div class="auth-container px-4">
    <div class="auth-card w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
        <!-- Error Icon -->
        <div class="text-center mb-6">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-100 dark:bg-red-900 mb-4">
                <svg class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t.auth_error }}</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                {{ t.unable_to_complete }}
            </p>
        </div>

        <!-- Error Details -->
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6" {% if lang == 'fa' %}dir="rtl"{% endif %}>
            <div class="space-y-3">
                {% if error %}
                <div>
                    <span class="text-sm font-semibold text-red-800 dark:text-red-300">{{ t.error_code }}</span>
                    <span class="text-sm font-mono text-red-900 dark:text-red-200 ml-2">{{ error }}</span>
                </div>
                {% endif %}

                {% if error_description %}
                <div>
                    <span class="text-sm font-semibold text-red-800 dark:text-red-300">{{ t.error_description }}</span>
                    <p class="text-sm text-red-900 dark:text-red-200 mt-1">{{ error_description }}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Common Solutions -->
        <div class="mb-6" {% if lang == 'fa' %}dir="rtl"{% endif %}>
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ t.common_solutions }}</h3>
            <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li class="flex items-start" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                    <svg class="h-5 w-5 text-gray-400 {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %} flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{% if lang == 'fa' %}M15 19l-7-7 7-7{% else %}M9 5l7 7-7 7{% endif %}"/>
                    </svg>
                    <span>{{ t.solution_1 }}</span>
                </li>
                <li class="flex items-start" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                    <svg class="h-5 w-5 text-gray-400 {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %} flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{% if lang == 'fa' %}M15 19l-7-7 7-7{% else %}M9 5l7 7-7 7{% endif %}"/>
                    </svg>
                    <span>{{ t.solution_2 }}</span>
                </li>
                <li class="flex items-start" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                    <svg class="h-5 w-5 text-gray-400 {% if lang == 'fa' %}ml-2{% else %}mr-2{% endif %} flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{% if lang == 'fa' %}M15 19l-7-7 7-7{% else %}M9 5l7 7-7 7{% endif %}"/>
                    </svg>
                    <span>{{ t.solution_3 }}</span>
                </li>
            </ul>
        </div>

        <!-- Action Button -->
        {% if redirect_uri %}
        <a href="{{ redirect_uri }}?error={{ error }}&error_description={{ error_description|urlencode }}{% if state %}&state={{ state }}{% endif %}"
           class="block w-full text-center px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
            {{ t.return_to_app }}
        </a>
        {% else %}
        <button onclick="window.close()"
                class="w-full px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
            {{ t.close_window }}
        </button>
        {% endif %}

        <!-- Support Link -->
        <div class="mt-6 text-center" {% if lang == 'fa' %}dir="rtl"{% endif %}>
            <p class="text-xs text-gray-500 dark:text-gray-400">
                {{ t.need_help }}
                <a href="https://github.com/airano-ir/mcphub" class="text-purple-600 dark:text-purple-400 hover:underline">{{ t.documentation }}</a>
            </p>
        </div>
    </div>
</div>
{% endblock %}