{% extends "base.html" %}

{% block title %}Link Expired{% endblock %}

{% block auth_content %}
<div style="width: 100%; max-width: 440px; padding: 0 16px; text-align: center;">

    <!-- Icon -->
    <div style="
        width: 64px; height: 64px;
        background: var(--surface-2);
        border-radius: var(--radius-full);
        display: inline-flex; align-items: center; justify-content: center;
        margin-bottom: 24px;
    ">
        <svg width="28" height="28" fill="none" stroke="var(--text-tertiary)" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <polyline points="12 6 12 12 16 14"/>
        </svg>
    </div>

    <h1 style="
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.015em;
        margin-bottom: 8px;
    ">{% if is_revoked %}This link has been revoked{% else %}This link has expired{% endif %}</h1>

    <p style="
        font-size: 0.9375rem;
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 24px;
    ">
        {% if error %}
            {{ error }}
        {% elif org_name %}
            Please contact <strong style="color: var(--text-primary);">{{ org_name }}</strong> to request a new connection link.
        {% else %}
            Please contact your agency to request a new connection link.
        {% endif %}
    </p>

    <div style="
        padding: 16px;
        background: var(--surface-2);
        border-radius: var(--radius-lg);
        font-size: 0.8125rem;
        color: var(--text-tertiary);
        line-height: 1.6;
    ">
        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline; vertical-align: -2px; margin-right: 4px;">
            <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
        </svg>
        Connection links are time-limited for security. Your agency can generate a new one at any time.
    </div>
</div>
{% endblock %}