{% extends "base.html" %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
{% endblock %}

{% block content %}
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
    <div class="flex justify-between items-center mb-6 border-b pb-4 border-gray-200 dark:border-gray-700">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ page.title }}</h1>
            <p class="text-sm text-gray-500 mt-1">Path: {{ page.path }} | Updated: {{ page.updated_at }}</p>
        </div>
        {% if session.get('is_admin') %}
        <a href="{{ url_for('wiki.edit', page_path=page.path) }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Edit</a>
        {% endif %}
    </div>
    
    <div id="wiki-content" class="prose dark:prose-invert max-w-none">
        <!-- Content will be rendered here -->
    </div>
    
    <!-- Hidden source for JS -->
    <div id="raw-content" class="hidden">{{ page.content }}</div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const rawContent = document.getElementById('raw-content').textContent;
        document.getElementById('wiki-content').innerHTML = marked.parse(rawContent);
    });
</script>
{% endblock %}