{% extends "base.html" %}

{% block title %}{{ doc_title }} - Docs{% endblock %}

{% block content %}
<main class="container">
    <nav aria-label="breadcrumb">
        <ul>
            <li><a href="/docs">📚 Docs</a></li>
            <li>{{ filename }}</li>
        </ul>
    </nav>

    <article class="doc-content">
        {{ doc_content | safe }}

        <footer>
            <hr>
            <a href="/docs" role="button" class="secondary outline">← Zurück zur Übersicht</a>
        </footer>
    </article>
</main>

<style>
    /* Styling for rendered Markdown */
    .doc-content h1,
    .doc-content h2,
    .doc-content h3 {
        color: var(--h1-color);
        margin-top: 1.5em;
    }

    .doc-content pre {
        background: var(--code-background-color);
        padding: 1em;
        border-radius: var(--border-radius);
    }

    .doc-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0;
    }

    .doc-content th,
    .doc-content td {
        border-bottom: 1px solid var(--muted-border-color);
        padding: 0.5em;
    }
</style>
{% endblock %}