{% extends "base.html" %}
{% load static i18n %}

{% block title %}{{ title }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-center">
        <div class="w-full max-w-2xl">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-amber-500 text-white p-5">
                    <h5 class="text-lg font-bold flex items-center gap-2">
                        <i data-lucide="alert-triangle" class="w-6 h-6"></i>
                        {{ title }}
                    </h5>
                </div>
                <div class="p-6">
                    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6 flex items-start gap-3">
                        <i data-lucide="info" class="w-5 h-5 text-amber-600 shrink-0 mt-0.5"></i>
                        <p class="text-amber-800">{{ message }}</p>
                    </div>

                    <div class="bg-gray-50 rounded-xl p-5 mb-6">
                        <div class="flex flex-wrap items-center gap-4 mb-4">
                            <div>
                                <strong class="text-gray-700">{% trans "Agency:" %}</strong> {{ access_link.assignment.agency.name }}
                            </div>
                            <div>
                                <strong class="text-gray-700">{% trans "Job:" %}</strong> {{ access_link.assignment.job.title }}
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-4 mb-4">
                            <div>
                                <strong class="text-gray-700">{% trans "Current Status:" %}</strong>
                                <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ 'bg-green-100 text-green-800' if access_link.is_active else 'bg-red-100 text-red-800' }}">
                                    {% if access_link.is_active %}
                                        {% trans "Active" %}
                                    {% else %}
                                        {% trans "Inactive" %}
                                    {% endif %}
                                </span>
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-4 mb-4">
                            <div>
                                <strong class="text-gray-700">{% trans "Expires:" %}</strong> {{ access_link.expires_at|date:"Y-m-d H:i" }}
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-4 mb-4">
                            <div>
                                <strong class="text-gray-700">{% trans "Access Count:" %}</strong> {{ access_link.access_count }}
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-4">
                            <div>
                                <strong class="text-gray-700">{% trans "Last Accessed:" %}</strong>
                                {% if access_link.last_accessed %}
                                    {{ access_link.last_accessed|date:"Y-m-d H:i" }}
                                {% else %}
                                    {% trans "Never" %}
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <form method="post" action="{% url request.resolver_match.url_name %}">
                        {% csrf_token %}
                        <div class="flex flex-col sm:flex-row gap-3 justify-end">
                            <a href="{{ cancel_url }}" class="inline-flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold px-6 py-2.5 rounded-xl transition">
                                <i data-lucide="x" class="w-4 h-4"></i>
                                {% trans "Cancel" %}
                            </a>
                            <button type="submit" class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white font-semibold px-6 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
                                <i data-lucide="{% if title == 'Reactivate Access Link' %}toggle-right{% else %}toggle-left{% endif %}" class="w-4 h-4"></i>
                                {{ title }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    lucide.createIcons();
</script>
{% endblock %}