{% extends "administration/base.html" %}

{% load i18n %}
{% load passbook_utils %}
{% load static %}

{% block head %}
{{ block.super }}
{{ form.media.css }}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/actions.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/urlify.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/prepopulate.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectBox.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectFilter2.js' %}"></script>
{% endblock %}

{% block content %}
<section class="pf-c-page__main-section pf-m-light">
    <div class="pf-c-content">
        {% block above_form %}
        {% endblock %}
    </div>
</section>
<section class="pf-c-page__main-section">
    <div class="pf-l-stack">
        <div class="pf-l-stack__item">
            <div class="pf-c-card">
                <div class="pf-c-card__body">
                    <form action="" method="post" class="pf-c-form pf-m-horizontal">
                        {% include 'partials/form_horizontal.html' with form=form %}
                        {% block beneath_form %}
                        {% endblock %}
                        <div class="pf-c-form__group pf-m-action">
                            <div class="pf-c-form__horizontal-group">
                                <div class="pf-c-form__actions">
                                    <input class="pf-c-button pf-m-primary" type="submit" value="{% block action %}{% endblock %}" />
                                    <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    const attributes = document.getElementsByName('attributes');
    if (attributes.length > 0) {
        // https://github.com/codemirror/CodeMirror/issues/5092
        attributes[0].removeAttribute("required");
        const attributesCM = CodeMirror.fromTextArea(attributes[0], {
            mode: 'yaml',
            theme: 'monokai',
            lineNumbers: true,
        });
    }
    const expressions = document.getElementsByName('expression');
    if (expressions.length > 0) {
        // https://github.com/codemirror/CodeMirror/issues/5092
        expressions[0].removeAttribute("required");
        const expressionCM = CodeMirror.fromTextArea(expressions[0], {
            mode: 'jinja2',
            theme: 'monokai',
            lineNumbers: true,
        });
    }
</script>
{% endblock %}

{% block scripts %}
{{ block.super }}
{{ form.media.js }}
{% endblock %}