{% extends "base.html" %}
{% block title %}Document Version Markdown{% endblock %}

{% block content_title %}Document Version Markdown{% endblock %}
{% block content_description %}Markdown inhoud van document versie {{ document_version.id }}.{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="card">
        <div class="card-header bg-light">
            <h5>Document Informatie</h5>
        </div>
        <div class="card-body">
            <p><strong>Document ID:</strong> {{ document_version.doc_id }}</p>
            <p><strong>Versie ID:</strong> {{ document_version.id }}</p>
            <p><strong>Object Naam:</strong> {{ document_version.object_name }}</p>
            <p><strong>Taal:</strong> {{ document_version.language }}</p>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5>Markdown Content</h5>
            <div class="btn-group" role="group">
                <button class="btn btn-sm btn-outline-secondary" id="showRaw">Toon ruw</button>
                <button class="btn btn-sm btn-outline-primary active" id="showRendered">Toon gerenderd</button>
            </div>
        </div>
        <div class="card-body">
            <!-- Ruwe markdown weergave (standaard verborgen) -->
            <div id="rawMarkdown" class="code-wrapper" style="display: none;">
                <pre><code class="language-markdown">{{ markdown_content }}</code></pre>
            </div>

            <!-- Gerenderde markdown weergave -->
            <div id="renderedMarkdown" class="markdown-body">
                {{ markdown_content | markdown }}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
<style>
    pre, code {
        margin: 0;
        padding: 0;
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        max-width: 100%;
    }

    pre code {
        padding: 1rem !important;
        border-radius: 4px;
        font-size: 0.75rem;
        line-height: 1.5;
        white-space: pre-wrap !important;
    }

    .code-wrapper {
        position: relative;
        width: 100%;
    }

    .markdown-body {
        padding: 1rem;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        line-height: 1.6;
    }

    /* Zorg ervoor dat de markdown goed uitziet in de donkere modus van de app (optioneel) */
    @media (prefers-color-scheme: dark) {
        .markdown-body {
            color: #c9d1d9;
            background-color: #0d1117;
        }
    }
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize syntax highlighting
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
    });

    // Schakelknoppen voor weergave
    const showRawBtn = document.getElementById('showRaw');
    const showRenderedBtn = document.getElementById('showRendered');
    const rawMarkdown = document.getElementById('rawMarkdown');
    const renderedMarkdown = document.getElementById('renderedMarkdown');

    showRawBtn.addEventListener('click', function() {
        rawMarkdown.style.display = 'block';
        renderedMarkdown.style.display = 'none';
        showRawBtn.classList.add('active');
        showRenderedBtn.classList.remove('active');
    });

    showRenderedBtn.addEventListener('click', function() {
        rawMarkdown.style.display = 'none';
        renderedMarkdown.style.display = 'block';
        showRawBtn.classList.remove('active');
        showRenderedBtn.classList.add('active');
    });
});
</script>
{% endblock %}