{% load i18n widget_tweaks %}
<div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">{% translate "Delete Wiki-Page" %}</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form method="post" action="{% url 'tinywiki:hx-page-delete' pk=page.pk %}">
                {% csrf_token %}
                <p>
                    {% with page.slug as page_slug %}
                    {% blocktranslate %}Type <b>{{ page_slug }}</b> in the field below to delete the Wiki-Page.{% endblocktranslate %}
                    {% endwith %}
                    <div>
                        <label for="form.slug.id-for-label" class="visually-hidden">{{ form.slug.label }}</label>
                        {% render_field form.slug class="form-control form-cotrol-sm" placeholder=page.slug %}

                    </div>
                    </div>
                    <div class="text-end">
                        <button class="btn btn-danger"
                            type="submit"
                            hx-trigger="click"
                            hx-post="{% url 'tinywiki:hx-page-delete' pk=page.pk %}"
                        >{% translate "Delete the page" %}</button>
                        <button clasS="btn btn-secondary" type="button" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    </div>
                </p>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
