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

{% 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;
        }

    </style>
    <div id="content-main" class="form-main">
        {% 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">
        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 %}
