{% extends "wagtailadmin/generic/edit.html" %}

{% load embed_video_tags wagtailimages_tags wagtailadmin_tags i18n l10n %}

{% block extra_css %}
  {{ block.super }}
  <style>
    .responsive-embed {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      /* matches django-embed-video's "small" preset (480x360) */
      overflow: hidden;
    }

    .responsive-embed iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
{% endblock %}
{% block form_content %}
  <div class="w-grid w-grid-cols-1 sm:w-grid-cols-2 w-gap-8">
    <div>
      <input type="hidden" value="{{ next }}" name="next" />
      {% for field in form %}
        {% if field.is_hidden %}
          {{ field }}
        {% else %}
          {% formattedfield field %}
        {% endif %}
      {% endfor %}
    </div>
    <div>
      <div class="responsive-embed">
        {# djlint:off T038 #}
        {% video embed_video.url "small" %}
          {# djlint:on #}
          </div>
          <div class="w-grid md:w-grid-cols-3 w-gap-2">
            <div class="w-col-span-2">
              <h3>{{ embed_video.title }}</h3>
              <p>{{ embed_video.url }}</p>
            </div>
            <div class="w-col-span-1">
              {% video embed_video.url as my_video %}
                <dl>
                  <dt>{% trans "Backend" %}</dt>
                  <dd>
                    {{ my_video.backend }}
                  </dd>
                  <dt>{% trans "Usage" %}</dt>
                  <dd>
                    <a href="{{ embed_video.usage_url }}">
                      {% blocktrans trimmed with usage_count=usage_count_val|intcomma count usage_count_val=usage_count_val %}
                        Used {{ usage_count }} time
                      {% plural %}
                        Used {{ usage_count }} times
                      {% endblocktrans %}
                    </a>
                  </dd>
                </dl>
              {% endvideo %}
            </div>
          </div>
          </div>
          </div>
        {% endblock %}