bmc_hub/app/modules/manual/templates/detail.html

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

{% block title %}{% if article %}{{ article.title }} - Manual{% else %}Manual ikke fundet{% endif %} - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .manual-shell {
        max-width: 1100px;
        margin: 0 auto;
    }
    .manual-section {
        background: var(--bg-card);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 12px;
    }
    .step-card {
        border-left: 4px solid var(--accent);
        border-radius: 8px;
        background: var(--bg-card);
        border: 1px solid rgba(0,0,0,0.08);
    }
    .step-media img,
    .step-media video {
        width: 100%;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,0.1);
        margin-top: 0.5rem;
    }
    .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 manual-shell">
    {% if article %}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <a href="/manual" class="text-decoration-none"><i class="bi bi-arrow-left me-1"></i>Tilbage til manualer</a>
            <h2 class="mt-2 mb-1">{{ article.title }}</h2>
            <div class="text-muted">{{ article.summary or 'Ingen kort beskrivelse.' }}</div>
        </div>
        <div class="text-end">
            <div><span class="badge bg-secondary">{{ article.difficulty }}</span></div>
            <div class="small text-muted mt-1"><i class="bi bi-eye me-1"></i>{{ article.use_count or 0 }} visninger</div>
        </div>
    </div>

    <div class="manual-section p-3 mb-3">
        <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
            <span class="fw-semibold"><i class="bi bi-grid me-1"></i>Modul:</span>
            <span class="badge text-bg-light">{{ article.module|title }}</span>
            <a href="/manual?module={{ article.module }}" class="btn btn-sm btn-outline-primary ms-2">Åbn i kontekst</a>
        </div>
        <div>
            {% for tag in article.tags or [] %}
            <span class="tag-chip">#{{ tag }}</span>
            {% endfor %}
        </div>
    </div>

    <div class="manual-section p-3 mb-3">
        <h5 class="mb-2"><i class="bi bi-journal-text me-2"></i>Guide</h5>
        {% set guide_text = article.content_normalized if article.content_normalized is defined and article.content_normalized else article.content %}
        <div class="text-body" style="white-space: pre-line; line-height: 1.6;">{{ guide_text | default('', true) | e | replace('&lt;br&gt;', '\n') | replace('&lt;br/&gt;', '\n') | replace('&lt;br /&gt;', '\n') | replace('\\n', '\n') }}</div>
    </div>

    <div class="manual-section p-3 mb-3">
        <h5 class="mb-3"><i class="bi bi-list-ol me-2"></i>Step-by-step</h5>
        {% if steps %}
            <div class="d-grid gap-2">
            {% for step in steps %}
                <div class="step-card p-3">
                    <div class="fw-semibold mb-1">Step {{ step.step_number }}: {{ step.title }}</div>
                    {% set step_text = step.content_normalized if step.content_normalized is defined and step.content_normalized else step.content %}
                    <div class="text-body" style="white-space: pre-line;">{{ step_text | default('', true) | e | replace('&lt;br&gt;', '\n') | replace('&lt;br/&gt;', '\n') | replace('&lt;br /&gt;', '\n') | replace('\\n', '\n') }}</div>
                    {% if step.image_url or step.video_url %}
                    <div class="step-media mt-2">
                        {% if step.image_url %}
                        <img src="{{ step.image_url }}" alt="Step billede" loading="lazy">
                        {% endif %}
                        {% if step.video_url %}
                        <video controls preload="none">
                            <source src="{{ step.video_url }}">
                        </video>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            {% endfor %}
            </div>
        {% else %}
            <div class="text-muted">Ingen steps endnu.</div>
        {% endif %}
    </div>

    <div class="manual-section p-3">
        <h5 class="mb-3"><i class="bi bi-link-45deg me-2"></i>Relaterede guides</h5>
        {% if related %}
            <div class="row g-2">
                {% for item in related %}
                <div class="col-12 col-md-6">
                    <div class="card border-0" style="background: var(--accent-light);">
                        <div class="card-body">
                            <div class="fw-semibold">{{ item.title }}</div>
                            <div class="small text-muted mb-2">{{ item.summary or 'Relateret guide' }}</div>
                            <a class="btn btn-sm btn-outline-primary" href="/manual/{{ item.slug }}">Åbn</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-muted">Ingen relaterede guider fundet.</div>
        {% endif %}
    </div>
    {% else %}
    <div class="card border-0">
        <div class="card-body text-center py-5">
            <i class="bi bi-journal-x" style="font-size: 2rem; color: var(--text-secondary);"></i>
            <h4 class="mt-3">Manual ikke fundet</h4>
            <a href="/manual" class="btn btn-primary mt-2">Tilbage til manualer</a>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}