{% load wagtailimages_tags wagtailembeds_tags %}
{% block homepage_media %}
{% if media %}
  <div class="media-player">
  {% for media in media %}
    <div class="media-player__wrapper media-player__wrapper--{% if  media.type == 'audio' %}audio{% else %}video{% endif %}">
      {% if media.youtube_link %}
        {% if not is_via_freebasics %}
          <div class="media-player__embed">
            {% embed media.youtube_link %}
          </div>
        {% else %}
          <div class="media-player__content">
            <h3 class="media-player__title">{{media.title}}</h3>
            <a alt="{% trans 'Click to watch on youtube!' %}" href="{{ media.youtube_link }}" target="_top" class="media-player__icon">
              {% trans 'Click to watch on youtube!' %}
            </a>
            <h4 class="media-player__subtitle">
              {% trans "Media will be played externally in a new window" %}
            </h4>
          </div>
        {% endif %}
      {% elif media.type == 'video' %}
        {% if not is_via_freebasics %}
        <div class="media-player__embed">
          <video poster="/media/{{ media.thumbnail }}" controls>
            <source src={{media.file.url}} type="video/mp4">
            <source src={{media.file.url}} type="video/webm">
            <source src={{media.file.url}} type="video/ogg">
            <span class="media-player__caption">
              {% trans "Your browser does not support the video tag." %}
            </span>
          </video>
        </div>
        {% else %}
          <div class="media-player__content">
            <h4 class="media-player__title">{{media.title}}</h4>
            <a alt="{% trans 'Click here to download video' %}" href="{{media.file.url}}" target="_top" onclick="ga('send', 'event', 'Video', 'Download', '{{media.title}}');" class="media-player__icon" download></a>
            <h3 class="media-player__subtitle">
              {% trans "Video files will not be played, you can download them" %}
            </h3>
          </div>
        {% endif %}
      {% elif media.type == 'audio' %}
        {% if not is_via_freebasics %}
        <div class="media-player__embed">
          <audio controls>
            <source src={{media.file.url}} type="audio/mpeg">
            <source src={{media.file.url}} type="audio/ogg">
            <source src={{media.file.url}} type="audio/wav">
              <span class="media-player__caption">
                {% trans "Your browser does not support the audio tag." %}
              </span>
          </audio>
        </div>
        {% else %}
          <div class="media-player__content">
            <h4 class="media-player__title">{{media.title}}</h4>
            <a alt="{% trans 'Click here to download audio' %}"  href="{{media.file.url}}" onclick="ga('send', 'event', 'Audio', 'Download', '{{media.title}}');" class="media-player__icon" download></a>
            <h3 class="media-player__subtitle">
              {% trans "Audio files will not be played, you can download them" %}
            </h3>
          </div>
        {% endif %}
      {% endif %}
      {% if not is_via_freebasics %}
        <div class="media-player__excerpt">
          {% if media.title %}
            <h3 class="media-player__title">{{media.title}}</h3>
            <a href="{{media.file.url}}" onclick="ga('send', 'event', '{% if media.youtube_link or media.type == 'video'%}Video{% elif media.type == 'audio'%}Audio{% endif %}', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
              {% trans "Download" %} {% if media.youtube_link or media.type == 'video'%}{% trans "Video" %}{% elif media.type == 'audio'%}{% trans "Audio" %}{% endif %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  {% endfor %}
  </div>
{% endif %}
{% endblock %}