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

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

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-sm border-danger">
                <div class="card-body text-center py-5">
                    <div class="mb-4">
                        <i class="bi bi-exclamation-circle-fill text-danger" style="font-size: 4rem;"></i>
                    </div>
                    
                    <h3 class="card-title text-danger mb-3">
                        {% trans "Activation Link Error" %}
                    </h3>
                    
                    <p class="card-text text-muted mb-4">
                        {% trans "The activation link you used is invalid or has expired. Invitation links are valid for 7 days from the time they are sent." %}
                    </p>
                    
                    <div class="alert alert-light border text-start mb-4">
                        <h6 class="fw-bold mb-2">{% trans "What you can do:" %}</h6>
                        <ul class="mb-0">
                            <li>{% trans "Check that you clicked the full link from the email" %}</li>
                            <li>{% trans "Request a new invitation from your administrator" %}</li>
                            <li>{% trans "Contact your PX Admin or Hospital Admin for assistance" %}</li>
                        </ul>
                    </div>
                    
                    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                        <a href="{% url 'accounts:login' %}" class="btn btn-primary">
                            <i class="bi bi-box-arrow-in-right me-2"></i>
                            {% trans "Go to Login" %}
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-4">
                <p class="text-muted small">
                    {% trans "Need help? Contact your administrator or PX support team." %}
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}