{% extends "base.html" %}

{% block title %}Go Links{% endblock %}

{% block extra_styles %}
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .header-actions {
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }

    .links-list {
        overflow: hidden;
    }

    .link-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.1s ease;
    }

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

    .link-item:hover {
        background: #f8fafc;
    }

    .link-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .link-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #eff6ff;
        color: #3b82f6;
        font-weight: 700;
        font-size: 14px;
        flex-shrink: 0;
    }

    .link-name {
        font-weight: 600;
        color: #0f172a;
        font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
        font-size: 14px;
    }

    .link-name span {
        color: #94a3b8;
        font-weight: 400;
    }

    .link-dest {
        color: #64748b;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 420px;
    }

    .link-arrow {
        color: #cbd5e1;
        font-size: 18px;
        flex-shrink: 0;
        margin-left: 8px;
        transition: color 0.15s ease, transform 0.15s ease;
    }

    .link-item:hover .link-arrow {
        color: #3b82f6;
        transform: translateX(2px);
    }

    .empty-state {
        text-align: center;
        padding: 64px 24px;
    }

    .empty-state .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.3;
    }

    .empty-state p {
        color: #94a3b8;
        font-size: 15px;
        margin-bottom: 4px;
    }

    .link-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eff6ff;
        color: #3b82f6;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 999px;
        margin-left: 10px;
        vertical-align: middle;
    }
{% endblock %}

{% block content %}
    <div class="page-header">
        <div>
            <h1>Go Links <span class="link-count">{{ config|length }}</span></h1>
            <div class="subtitle">{{ config_path }}</div>
        </div>
        <div class="header-actions">
            <a href="/stats" class="btn btn-secondary">Stats</a>
            <a href="/edit" class="btn btn-primary">Edit Links</a>
        </div>
    </div>

    <div class="card links-list">
        {% if config %}
            {% for shortcut, destination in config|dictsort %}
                <a href="/{{ shortcut }}" class="link-item" style="text-decoration: none; color: inherit;">
                    <div class="link-left">
                        <div class="link-icon">{{ shortcut[0]|upper }}</div>
                        <div>
                            <div class="link-name"><span>go/</span>{{ shortcut }}</div>
                            <div class="link-dest">{{ destination }}</div>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        {% if stats.get(shortcut, 0) > 0 %}
                            <span style="color: #94a3b8; font-size: 12px;">{{ stats[shortcut] }} visit{{ 's' if stats[shortcut] != 1 }}</span>
                        {% endif %}
                        <div class="link-arrow">&rarr;</div>
                    </div>
                </a>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <div class="empty-icon">&#9898;</div>
                <p>No links configured yet.</p>
                <p>Add links to your config file to get started.</p>
            </div>
        {% endif %}
    </div>
{% endblock %}