{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}System Documentation - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/documentation.css">
{% endblock %}
{% block content %}
<div class="container">
        <div class="header">
            <form class="refresh-form" method="post" action="/documentation/update">
                <button class="refresh-btn" type="submit">Refresh Documentation</button>
            </form>
            <h1>📚 System Documentation</h1>
            {{ ui.button('← Back to Admin', '/admin') }}
        </div>

        <div class="content">
            {{ content | safe }}
        </div>

        <footer>
            <p>Gvelo Enterprise Platform Documentation</p>
            <p>Last updated: <span id="update-time">Loading...</span></p>
        </footer>
    </div>

    <script>
        // Add some interactivity
        document.querySelectorAll('.content h2').forEach(h2 => {
            h2.style.cursor = 'pointer';
            h2.addEventListener('click', function() {
                const nextElement = this.nextElementSibling;
                if (nextElement && nextElement.tagName !== 'H2') {
                    nextElement.style.display = nextElement.style.display === 'none' ? 'block' : 'none';
                }
            });
        });

        // Display current time
        document.getElementById('update-time').textContent = new Date().toLocaleString();
    </script>
{% endblock %}