{% extends "shared/frontend/base.html" %}

{% block title %}Manualer - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .manual-header {
        background: var(--bg-card);
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.08);
        padding: 1rem;
    }
    .manual-card {
        background: var(--bg-card);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 12px;
        height: 100%;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .manual-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }
    .manual-meta {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    .tag-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: var(--accent-light);
        color: var(--accent);
        font-size: 0.75rem;
        margin-right: 0.35rem;
        margin-bottom: 0.35rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-1"><i class="bi bi-journal-richtext me-2"></i>Manualer</h2>
            <div class="text-muted">Kontekstuel og søgbar hjælp til alle moduler</div>
        </div>
        <div class="d-flex gap-2">
            <a href="/manual/admin" class="btn btn-outline-primary">
                <i class="bi bi-gear me-1"></i>Admin
            </a>
            <a href="/manual?module={{ filters.module }}" class="btn btn-primary">
                <i class="bi bi-arrow-repeat me-1"></i>Opdater
            </a>
        </div>
    </div>

    <div class="manual-header mb-3">
        <form method="get" class="row g-2">
            <div class="col-12 col-lg-4">
                <input type="text" class="form-control" name="search" value="{{ filters.search }}" placeholder="Søg i titel, resume og indhold">
            </div>
            <div class="col-6 col-lg-2">
                <select class="form-select" name="module">
                    <option value="">Alle moduler</option>
                    {% for m in available_modules %}
                    <option value="{{ m.module }}" {% if filters.module == m.module %}selected{% endif %}>{{ m.module|title }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-6 col-lg-2">
                <select class="form-select" name="difficulty">
                    <option value="">Alle niveauer</option>
                    <option value="beginner" {% if filters.difficulty == 'beginner' %}selected{% endif %}>Beginner</option>
                    <option value="advanced" {% if filters.difficulty == 'advanced' %}selected{% endif %}>Advanced</option>
                </select>
            </div>
            <div class="col-8 col-lg-3">
                <select class="form-select" name="tag">
                    <option value="">Alle tags</option>
                    {% for t in available_tags %}
                    <option value="{{ t }}" {% if filters.tag == t %}selected{% endif %}>{{ t }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-4 col-lg-1 d-grid">
                <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i></button>
            </div>
        </form>
    </div>

    <div class="row g-3">
        {% if articles %}
            {% for article in articles %}
            <div class="col-12 col-md-6 col-xl-4">
                <div class="manual-card p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h5 class="mb-0">{{ article.title }}</h5>
                        <span class="badge bg-secondary">{{ article.difficulty }}</span>
                    </div>
                    <div class="manual-meta mb-2">
                        <i class="bi bi-grid me-1"></i>{{ article.module|title }}
                        <span class="mx-2">•</span>
                        <i class="bi bi-eye me-1"></i>{{ article.use_count or 0 }}
                    </div>
                    <p class="text-muted mb-2">{{ article.summary or 'Ingen introduktion endnu.' }}</p>
                    <div class="mb-3">
                        {% for tag in article.tags or [] %}
                            <span class="tag-chip">#{{ tag }}</span>
                        {% endfor %}
                    </div>
                    <a href="/manual/{{ article.slug }}" class="btn btn-sm btn-outline-primary">
                        Åbn guide <i class="bi bi-arrow-right-short"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col-12">
                <div class="card border-0">
                    <div class="card-body text-center py-5">
                        <i class="bi bi-search" style="font-size: 2rem; color: var(--text-secondary);"></i>
                        <div class="mt-2">Ingen manualer matcher filteret.</div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}