{% extends "base.html" %}

{% block header_title %}All Packages{% endblock %}
{% block header_subtitle %}Browse all {{ total_packages }} packages in Rocky Linux {{ version }}{% endblock %}

{% block extra_css %}
.back-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}

.back-button:hover {
color: var(--accent-primary);
text-decoration: none;
}

.az-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
}

.az-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 4px;
background-color: var(--bg-tertiary);
color: var(--text-primary);
text-decoration: none;
font-family: "JetBrains Mono", monospace;
font-weight: 600;
transition: all 0.2s;
}

.az-link:hover {
background-color: var(--accent-primary);
color: white;
text-decoration: none;
}

.az-link.disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}

.package-section {
margin-bottom: 3rem;
}

.section-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}

.section-letter {
font-size: 2rem;
font-weight: 700;
color: var(--accent-primary);
font-family: "Red Hat Display", sans-serif;
margin-right: 1rem;
}

.section-count {
color: var(--text-secondary);
font-size: 0.9rem;
}

.package-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}

.package-card {
display: block;
padding: 1rem;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
text-decoration: none;
transition: all 0.2s;
}

.package-card:hover {
transform: translateY(-2px);
border-color: var(--accent-primary);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-decoration: none;
}

.pkg-name {
display: block;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}

.pkg-count {
display: block;
font-size: 0.85rem;
color: var(--text-secondary);
}

.back-to-top {
display: inline-block;
margin-top: 2rem;
color: var(--text-secondary);
font-size: 0.9rem;
}

@media (max-width: 768px) {
    .az-nav {
        gap: 0.375rem;
    }

    .az-link {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
    }

    .package-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .section-letter {
        font-size: 1.5rem;
    }

    .package-card {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .az-nav {
        gap: 0.25rem;
    }

    .az-link {
        width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
    }

    .package-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .pkg-name {
        font-size: 0.95rem;
    }

    .pkg-count {
        font-size: 0.8rem;
    }
}
{% endblock %}

{% block content %}
<div class="content">
    <div style="margin-bottom: 2rem;">
        <a href="./index.html" class="back-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
            Back to Search
        </a>
    </div>

    <nav class="az-nav">
        {% for letter in "ABCDEFGHIJKLMNOPQRSTUVWXYZ" %}
        {% if letter in packages_by_letter %}
        <a href="#section-{{ letter }}" class="az-link">{{ letter }}</a>
        {% else %}
        <span class="az-link disabled">{{ letter }}</span>
        {% endif %}
        {% endfor %}
        {% if 'other' in packages_by_letter %}
        <a href="#section-other" class="az-link">#</a>
        {% endif %}
    </nav>

    {% for letter, packages in packages_by_letter.items()|sort %}
    <div id="section-{{ letter }}" class="package-section">
        <div class="section-header">
            <span class="section-letter">{{ letter }}</span>
            <span class="section-count">{{ packages|length }} packages</span>
        </div>
        <div class="package-grid">
            {% for package in packages %}
            <a href="index.html?q={{ package.name|urlencode }}" class="package-card">
                <span class="pkg-name">{{ package.name }}</span>
                <span class="pkg-count">{{ package.count }} man pages</span>
            </a>
            {% endfor %}
        </div>
        <a href="#" class="back-to-top">↑ Back to top</a>
    </div>
    {% endfor %}
</div>
{% endblock %}