{% extends "wagtailadmin/base.html" %}
{% load wagtailadmin_tags i18n l10n %}
{% block titletag %}{% blocktrans trimmed with title=video.title %}Editing video {{ title }}
{% endblocktrans %}{% endblock %}
{% block extra_css %}
    {{ block.super }}
    {{ form.media.css }}

    {% include "wideo/preview/plyr_styles.html" %}
{% endblock %}

{% block extra_js %}
    {{ block.super }}

    {{ 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=video.title icon="video" %}
    {% include "wagtailadmin/shared/non_field_errors.html" %}

    <form action="{% url 'wideo:edit' video.id %}" method="POST" enctype="multipart/form-data" novalidate
          class="col6">
        {% csrf_token %}
        <input type="hidden" value="{{ next }}" name="next">
        <div class="row row-flush nice-padding">
            {% for field in form %}
                {% if field.name == 'upload' %}
                    {% include "wideo/forms/file_edit.html" %}
                {% elif field.is_hidden %}
                    {{ field }}
                {% else %}
                    {% include "wagtailadmin/shared/field.html" %}
                {% endif %}
            {% endfor %}
            <div class="w-hidden sm:w-block">
                <input type="submit" value="{% trans 'Save' %}" class="button" />
                {% if user_can_delete %}
                    <a href="{% url 'wideo:delete' video.id %}{% if next %}?next={{ next|urlencode }}{% endif %}"
                       class="button no">{% trans "Delete video" %}</a>
                {% endif %}
            </div>
        </div>

        <div class="row row-flush nice-padding sm:!w-hidden">
            <div class="col5">
                <input type="submit" value="{% trans 'Save' %}" class="button" />
                {% if user_can_delete %}
                    <a href="{% url 'wideo:delete' video.id %}{% if next %}?next={{ next }}{% endif %}"
                       class="button no">{% trans "Delete video" %}</a>
                {% endif %}
            </div>
        </div>
    </form>

    <div class="col6">
        <div class="video-container">
            <video id="player" playsinline controls></video>
        </div>
    </div>

    {% include "wideo/preview/video_source.html" with current_video_id=video.upload.id %}
{% endblock %}
