{% extends "wagtailadmin/base.html" %}
{% load embed_video_tags wagtailimages_tags wagtailadmin_tags static i18n l10n %}
{% block titletag %}{% blocktrans with title=embed_video.title %}Editing embed video {{ title }}{% endblocktrans %}{% endblock %}
{% block extra_css %}
    {{ block.super }}
    {% include "wagtailadmin/pages/_editor_css.html" %}
    {{ form.media.css }}
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    {% include "wagtailadmin/pages/_editor_js.html" %}
    {{ form.media.js }}

    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
    <script>
        $(function() {
            $('#id_tags').tagit({
                autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
            });
        });
    </script>
{% endblock %}

{% block content %}
    {% trans "Editing" as editing_str %}
    {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=embed_video.title icon="media" usage_object=embed_video %}
    {% include "wagtailadmin/shared/non_field_errors.html" %}

    <form action="{% url 'wagtail_embed_videos:edit' embed_video.id %}" method="POST" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <div class="row row-flush nice-padding">
            <div class="col6">
                <ul class="fields">
                    {% for field in form %}
                        {% if field.is_hidden %}
                            {{ field }}
                        {% else %}
                            {% include "wagtailadmin/shared/field_as_li.html" with li_classes="label-above label-uppercase" %}
                        {% endif %}
                    {% endfor %}
                </ul>
                <div class="u-hidden@xs">
                    <input type="submit" value="{% trans 'Save' %}" class="button" />
                    {% if user_can_delete %}
                        <a href="{% url 'wagtail_embed_videos:delete' embed_video.id %}" class="button button-secondary no">{% trans "Delete embed video" %}</a>
                    {% endif %}
                </div>
            </div>
            <div class="col6">
                {% video embed_video.url as my_video %}
                    {% video my_video "small" %}
                    <div class="row">
                        <div class="col12">
                            <dl>
                                <dt>{% trans "URL" %}</dt>
                                <dd>{{ my_video.url }}</dd>
                                <dt>{% trans "Backend" %}</dt>
                                <dd>{{ my_video.backend }}</dd>
                            </dl>
                        </div>
                    </div>
                {% endvideo %}
            </div>
        </div>

        <div class="row row-flush nice-padding u-hidden@sm">
            <div class="col5">
                <input type="submit" value="{% trans 'Save' %}" class="button" />
                {% if user_can_delete %}
                    <a href="{% url 'wagtail_embed_videos:delete' embed_video.id %}" class="button button-secondary no">{% trans "Delete embed video" %}</a>
                {% endif %}
            </div>
        </div>
    </form>
{% endblock %}
