{% extends base_template %}
{% load i18n static %}

{% block extra_css %}
<link rel="stylesheet" id="hljs-theme" href="{% static 'tinywiki/css/atom-one-light.min.css' %}">
{% endblock %}
{% block scripts %}
<script>
    const theme=(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    if (theme==="dark") {
        let hljs_theme = document.getElementById('hljs-theme');
        hljs_theme.setAttribute('href',href="{% static 'tinywiki/css/atom-one-dark.min.css' %}");
}
</script>
<script src="{% static 'tinywiki/js/highlight.min.js' %}"></script>
<script src="{% static 'tinywiki/js/bbcode.js' %}"></script>
{% endblock %}

{% block extra_scripts %}
<script>hljs.highlightAll();</script>
{% endblock %}

{% block content %}
<div class="text-end">
    {% if user_can_edit_wiki_page %}
    <a class="btn btn-primary" href="{% url 'tinywiki:page-edit' slug=page.slug %}">{% translate "Edit Page" %}</a>
    {% endif %}
    {% if user_can_delete_wiki_page %}
    <button class="btn btn-danger"
        hx-get="{% url 'tinywiki:hx-page-delete' pk=page.pk %}"
        hx-target="#modal-here"
        hx-swap="innerHTML"
        hx-trigger="clicked"
        data-bs-toggle="modal"
        data-bs-target="#modal-here"
    >{% translate "Delete Page" %}</button>
    {% endif %}

</div>
{{ page.html_content }}
{% endblock content %}

{% block extra_body %}
<div id="modal-here" class="modal modal-blur fade" style="display:none;" aria-hidden="false" tab-index="-1">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content"></div>
    </div>
</div>
{% endblock extra_body%}