{% extends "base.html" %}

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

{% block content %}
<p class="text-small text-muted">
    <a href="/docs">Docs</a> &gt; {{ rel_path }}
</p>

<h2>📄 {{ title }}</h2>

<div class="card">
    {% if rendered_html %}
        <div class="markdown-body">
            {{ rendered_html|safe }}
        </div>
    {% else %}
        <pre>{{ raw }}</pre>
    {% endif %}
</div>

<p class="mt-20">
    <a href="/docs" class="btn">← Back to Docs</a>
</p>

<style>
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 5px;
}
.markdown-body h1 { font-size: 22px; }
.markdown-body h2 { font-size: 18px; }
.markdown-body h3 { font-size: 16px; }
.markdown-body p { margin: 10px 0; }
.markdown-body code {
    background: #1a1a1a;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 13px;
    color: #ff9e4a;
}
.markdown-body pre {
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    padding: 10px;
    border-radius: 3px;
    overflow-x: auto;
    margin: 10px 0;
}
.markdown-body pre code {
    background: transparent;
    padding: 0;
    color: #e0e0e0;
}
.markdown-body ul, .markdown-body ol {
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 10px;
}
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
.markdown-body th, .markdown-body td {
    padding: 6px 10px;
    border: 1px solid #3a3a3a;
}
.markdown-body th { background: #333; }
.markdown-body blockquote {
    border-left: 3px solid #4a9eff;
    padding-left: 15px;
    margin: 10px 0;
    color: #aaa;
}
.markdown-body a { color: #4a9eff; }
</style>
{% endblock %}