{% extends "base.html" %}

{% block title %}Go Link Not Found{% endblock %}

{% block max_width %}560px{% endblock %}
{% block container_padding %}80px 24px{% endblock %}

{% block extra_styles %}
    .error-page {
        text-align: center;
    }

    .error-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        background: #fef2f2;
        color: #ef4444;
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .error-page h1 {
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }

    .error-detail {
        color: #64748b;
        font-size: 15px;
        margin-bottom: 32px;
    }

    .error-detail code {
        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 14px;
        color: #0f172a;
        font-weight: 500;
    }

    .suggestions-card {
        text-align: left;
        padding: 20px;
    }

    .suggestions-title {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
        margin-bottom: 12px;
    }

    .suggestion-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .suggestion-item:last-child {
        border-bottom: none;
    }

    .suggestion-item a {
        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
        font-size: 14px;
        font-weight: 500;
    }

    .suggestion-bullet {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #cbd5e1;
        flex-shrink: 0;
    }

    .back-link {
        margin-top: 24px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #64748b;
    }

    .back-link:hover {
        color: #3b82f6;
    }
{% endblock %}

{% block content %}
    <div class="error-page">
        <div class="error-badge">?</div>
        <h1>Link Not Found</h1>
        <p class="error-detail">
            The shortcut <code>go/{{ path }}</code> doesn't exist.
        </p>

        {% if config %}
            <div class="card suggestions-card">
                <div class="suggestions-title">Available shortcuts</div>
                {% for shortcut in suggestions %}
                    <div class="suggestion-item">
                        <div class="suggestion-bullet"></div>
                        <a href="/{{ shortcut }}">go/{{ shortcut }}</a>
                    </div>
                {% endfor %}
                {% if remaining_count > 0 %}
                    <div class="suggestion-item">
                        <div class="suggestion-bullet"></div>
                        <a href="/">and {{ remaining_count }} more&hellip;</a>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        <div>
            <a href="/" class="back-link">&larr; View all links</a>
        </div>
    </div>
{% endblock %}