{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify simpletags%}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{{ media }}

{% endblock %}
{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>{% endblock %}
{% block content %}
<style type="text/css">
    .inline-group .tabular td.original p {
        margin-top: -33px;
    }

    .page-header {
        padding: 10px;
    }

</style>
<div id="content-main" class="form-main">
    {% if '_popup' not in request.GET %}
    <div class="page-header">
        <el-page-header @back="goBack" content="{{title}}"/>
    </div>
    {% endif %}
    {% block object-tools %}
    {% if change %}{% if not is_popup %}
    <ul class="object-tools">
        {% block object-tools-items %}
        <li>
            <el-dialog title="{% trans "History" %}" :visible.sync="dialogTableVisible">
            <iframe frameborder="0" :src="url" width="100%" height="300"></iframe>
            </el-dialog>
            {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}

            <el-button @click="go_url('{% add_preserved_filters history_url %}')" class="historylink"
                       icon="fas fa-history">{% trans "History" %}
            </el-button>
        </li>
        {% if has_absolute_url %}
        <li>
            <el-button @click="window.open('{{ absolute_url }}')" class="viewsitelink" icon="fas fa-globe-asia">{% trans "View on site" %}</el-button>
        </li>
        {% endif %}
        {% endblock %}
    </ul>
    {% endif %}{% endif %}
    {% endblock %}
    <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}action="{{ form_url }}" method="post"
          id="{{ opts.model_name }}_form" novalidate>{% csrf_token %}{% block form_top %}{% endblock %}
        <div>
            {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1"/>{% endif %}
            {% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}"/>{% endif %}
            {% if save_on_top %}{% block submit_buttons_top %}{% submit_row %}{% endblock %}{% endif %}
            {% if errors %}
            <div id="alert">
                <el-alert
                        title="{% if errors|length == 1 %}
                            {% trans " Please correct the error below." %}
                {% else %}
                {% trans "Please correct the errors below." %}
                {% endif %}"
                type="error">
                </el-alert>
            </div>
            {{ adminform.form.non_field_errors }}
            {% endif %}

            {% block field_sets %}
            {% for fieldset in adminform %}
            {% include "admin/includes/fieldset.html" %}
            {% endfor %}
            {% endblock %}

            {% block after_field_sets %}{% endblock %}

            {% block inline_field_sets %}
            {% for inline_admin_formset in inline_admin_formsets %}
            {% include inline_admin_formset.opts.template %}
            {% endfor %}
            {% endblock %}

            {% block after_related_objects %}{% endblock %}

            {% block submit_buttons_bottom %}{% submit_row %}{% endblock %}

            {% block admin_change_form_document_ready %}
            <script type="text/javascript"
                    id="django-admin-form-add-constants"
                    src="{% static 'admin/js/change_form.js' %}"
                    {% if adminform and add %}
                    data-model-name="{{ opts.model_name }}"
                    {% endif %}>
            </script>
            {% endblock %}

            {# JavaScript for prepopulated fields #}
            {% prepopulated_fields_js %}

        </div>
    </form>

</div>
<script type="text/javascript">
    new Vue({
        el: '.page-header',
        methods: {
            goBack: function () {
                window.location.href = '{% get_model_url %}'
            }
        }
    })
    if ($(".object-tools").length != 0) {
        new Vue({
            el: '.object-tools',
            data: {
                dialogTableVisible: false,
                url: ''
            },
            methods: {
                go_url: function (url) {
                    this.url = url;
                    this.dialogTableVisible = true;
                }
            }
        })
    }
    if (document.getElementById('alert')) {
        new Vue({
            el: '#alert'
        })
    }
</script>
{% endblock %}
