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

{% block title %}{% trans "Activation Error" %}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-red-50 to-light flex items-center justify-center py-12 px-4">
    <div class="max-w-2xl w-full">
        <div class="bg-white rounded-3xl shadow-xl p-8 md:p-12">
            <!-- Error Icon -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-red-400 to-blue rounded-full mb-6">
                    <i data-lucide="alert-triangle" class="w-12 h-12 text-white"></i>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-3">
                    {% trans "Activation Failed" %}
                </h1>
                <p class="text-xl text-gray-500">
                    {% trans "We couldn't activate your account" %}
                </p>
            </div>

            <!-- Error Message -->
            <div class="bg-red-50 border border-red-200 rounded-2xl p-5 mb-8">
                <div class="flex items-start gap-3">
                    <i data-lucide="alert-circle" class="w-6 h-6 text-red-600 flex-shrink-0 mt-0.5"></i>
                    <div>
                        <p class="text-red-800 font-medium mb-1">{% trans "Error Details" %}</p>
                        <p class="text-red-700 text-sm">
                            {% if error_message %}{{ error_message }}{% else %}{% trans "The activation link you used is invalid or has expired. Please contact your administrator for a new invitation." %}{% endif %}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Help Section -->
            <div class="bg-blue-50 border border-blue-200 rounded-2xl p-5 mb-8">
                <div class="flex items-start gap-3">
                    <i data-lucide="help-circle" class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5"></i>
                    <div>
                        <p class="text-blue-800 font-medium mb-1">{% trans "What can you do?" %}</p>
                        <ul class="text-blue-700 text-sm space-y-2">
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 flex-shrink-0"></i>
                                <span>{% trans "Contact your administrator for a new invitation link" %}</span>
                            </li>
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 flex-shrink-0"></i>
                                <span>{% trans "Make sure you clicked the most recent invitation email" %}</span>
                            </li>
                            <li class="flex gap-2">
                                <i data-lucide="check" class="w-4 h-4 flex-shrink-0"></i>
                                <span>{% trans "Check with IT support if you continue to have issues" %}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Back Button -->
            <div class="text-center">
                <a href="/accounts/login/" class="inline-flex items-center justify-center w-full md:w-auto bg-gradient-to-r from-gray-500 to-gray-600 text-white px-10 py-4 rounded-2xl font-bold text-lg hover:from-gray-600 hover:to-gray-700 transition shadow-lg">
                    <i data-lucide="arrow-left" class="w-5 h-5 mr-2"></i>
                    {% trans "Back to Login" %}
                </a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}