{% extends "base.html" %}
{% load wagtailsettings_tags wagtailcore_tags core_tags wagtailimages_tags wagtailembeds_tags gem_tags %}
{% get_settings %}

{% block content %}
{% with ancestor=self.get_parent_section.get_parent_section.get_parent_section parent=self.get_parent_section.get_parent_section  section=self.get_parent_section %}
  {% get_translation section as translated_section %}
  {% if ancestor %}
    {% content_is ancestor "Watch" as is_watch_ancestor %}
    {% content_is ancestor "Listen" as is_listen_ancestor %}
  {% elif parent %}
    {% content_is parent "Watch" as is_watch_parent %}
    {% content_is parent "Listen" as is_listen_parent %}
  {% else %}
    {% content_is section "Watch" as is_watch %}
    {% content_is section "Listen" as is_listen %}
    {% content_is section "News" as is_news %}
    {% content_is section "Cast" as is_cast %}
  {% endif %}

  <div class="article-page{% if section.get_effective_extra_style_hints %} article-page--{{section.get_effective_extra_style_hints}}{% endif %}">
    <div class="banner">
      <div class="heading heading--hero">
          {% if is_watch_ancestor or is_watch_parent or is_watch %}
            {% if ancestor %}<h1 class="heading__title">{{ancestor.title}} {{parent.title}} </h1>
            {% else %}<h1 class="heading__title">{{parent.title}} {{translated_section.title}}</h1>{% endif %}
          {% elif is_listen_ancestor or is_listen_parent or is_listen %}
            {% if ancestor %}<h1 class="heading__title">{{ancestor.title}} {{parent.title}} </h1>
            {% else %}<h1 class="heading__title">{{parent.title}} {{translated_section.title}}</h1>{% endif %}
          {% elif is_news %}
            <h1 class="heading__title">{% trans "Latest" %} <span class="banner__section-name">{{translated_section.title}}</span></h1>
            <h3 class="heading__subtitle">{{self.title}}</h3>
          {% elif is_cast %}
            <h1 class="heading__title">{% trans "Meet the Yegna" %} <span class="banner__section-name">{{translated_section.title}}</span></h1>
            <h3 class="heading__subtitle">{{self.title}}</h3>
          {% else %}
            <h1 class="heading__title">{{translated_section.title}}</h1>
          {% endif %}
        </div>
    </div>
    <div class="article-page__wrapper{% if is_cast %} article-page__wrapper--cast{% endif %}">
      {% if is_watch_ancestor or is_watch_parent or is_watch %}
        <div class="teaser-breadcrumb">
          <ul class="teaser-breadcrumb-list">
            {% if parent != None %}
              <li class="teaser-breadcrumb-list__item">
                <span class="teaser-breadcrumb-list__anchor">{{parent}}</span>
              </li>
            {% endif %}
            {% if section != None %}
              <li class="teaser-breadcrumb-list__item">
                <a href="{% pageurl self.specific %}"  class="teaser-breadcrumb-list__anchor">{{translated_section}}</a>
              </li>
            {% endif %}
          </ul>
        </div>
        <h1 class="heading__subheading heading__subheading--watch">{{ page.title}}</h1>
        {% if page.homepage_media %}
          {% for block in page.homepage_media %}
            {% with block.value as media %}
              {% if media.duration %}
                <p class="media-player__duration">({{media.duration}})</p>
              {% endif %}
              <div class="call-to-action call-to-action--watch call-to-action--media-download">
                <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Video', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                  {% trans "Download" %} {% if media.file.size %}<span class="call-to-action__item--text">({{media.file.size|filesizeformat}})</span>{% endif %}
                </a>
              </div>
            {% endwith %}
          {% endfor %}
        {% endif %}
      {% endif %}

      {% if is_listen_ancestor or is_listen_parent or is_listen %}
        <div class="teaser-breadcrumb">
          <ul class="teaser-breadcrumb-list">
            {% if parent != None %}
              <li class="teaser-breadcrumb-list__item">
                <span class="teaser-breadcrumb-list__anchor">{{parent}}</span>
              </li>
            {% endif %}
            {% if section != None %}
              <li class="teaser-breadcrumb-list__item">
                <a href="{% pageurl self.specific %}"  class="teaser-breadcrumb-list__anchor">{{translated_section}}</a>
              </li>
            {% endif %}
          </ul>
        </div>
        <h1 class="heading__subheading heading__subheading--listen">{{ page.title}}</h1>
        {% if page.homepage_media %}
          {% for block in page.homepage_media %}
            {% with block.value as media %}
              <div class="call-to-action call-to-action--listen call-to-action--media-download">
                <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Audio', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                  {% trans "Download" %} {% if media.file.size %}<span class="call-to-action__item--text">({{media.file.size|filesizeformat}})</span>{% endif %}
                </a>
              </div>
          {% endwith %}
          {% endfor %}
        {% endif %}
      {% endif %}

      {% if page.homepage_media %}
        {% for block in page.homepage_media %}
          {% with block.value as media %}
            {% if block.value.youtube_link %}
              <div class="article-page__images article-page__images-hero">
                {% embed media.youtube_link %}
              </div>
            {% elif block.value.type == 'video' %}
              <div class="article-page__images article-page__images-hero">
                <div class="media-player__embed">
                  <video poster="{% if media.thumbnail %}{{ media.thumbnail.url }}{% endif %}" 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>
              </div>
            {% elif block.value.type == 'audio' %}
                {% if self.get_effective_image %}
                  <div class="article-page__images article-page__images-hero">
                    {% image self.get_effective_image width-1080 format-jpeg as article_thumbnail %}
                    <img alt="{{ self.title }}" src="{{ article_thumbnail.url }}" class="article-page__thumbnail" />
                  </div>
                {% endif %}
                <div class="media-player__embed media-player__embed--audio">
                  <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>
              {% endif %}
          {% endwith %}
        {% endfor %}
      {% else %}
        {% if self.get_effective_image %}
         <div class="article-page__images">
           {% image self.get_effective_image width-1080 format-jpeg as article_thumbnail %}
           <img alt="{{ self.title }}" src="{{ article_thumbnail.url }}" class="article-page__thumbnail" />
         </div>
       {% endif %}
      {% endif %}
      {% if is_news or is_cast %}
        <div class="heading heading--macro">
          <h1 class="heading__title">{{ page.title}}</h1>
        </div>
        <h3 class="heading__subtitle">{{ page.subtitle}}</h3>
      {% endif %}
      {% load_tags_for_article self as tags %}
      {% if tags %}
        <ul class="teaser-tags">
          {% if settings.core.SiteSettings.enable_tag_navigation %}
            {% for tag in tags %}
              {% if not tag.title.20 %}
                <li class="teaser-tags__item">
                  <a href="{% url 'tags_list' tag.slug %}" class="teaser-tags__anchor">
                    <span class="teaser-tags__title">{{ tag.title }}</span>
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          {% endif %}
        </ul>
      {% endif %}

    {% if is_watch_ancestor or is_watch_parent or is_watch %}
      <div class="article-page__columns">
        <div class="article-page__first-column">
    {% elif is_listen_ancestor or is_listen_parent or is_listen %}
      <div class="article-page__columns">
        <div class="article-page__first-column">
    {% endif %}
      <article class="article">
        {% for block in self.body %}
          {% if block.block_type == 'heading' %}
            <h3 class="heading__title">{{ block.value }}</h3>
          {% elif block.block_type == 'image' %}
            <div class="article-page__images--inner">
              {% image block.value width-720 format-jpeg class="article-page__thumbnail--inner" %}
            </div>
          {% elif block.value.youtube_link %}
            {% with block.value as media %}
              <div class="media-player">
                <div class="media-player__wrapper media-player__wrapper--video">
                  {% if not is_via_freebasics %}
                    <div class="media-player__embed">
                      {% embed media.youtube_link %}
                    </div>
                    <div class="media-player__download">
                      <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Video', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                        {% trans "Download" %}
                      </a>
                    </div>
                  {% else %}
                    <div class="media-player__content">
                      <h4 class="media-player__title">{{media.title}}</h4>
                      <a alt="{% trans 'Click to watch on youtube!' %}" href="{{ media.youtube_link }}" target="_top" class="media-player__icon" download>
                        {% trans 'Click to watch on youtube!' %}
                      </a>
                      <h3 class="media-player__subtitle">
                      {% trans "Media will be played externally in a new window" %}
                      </h3>
                    </div>
                  {% endif %}
                </div>
              </div>
            {% endwith %}
          {% elif block.value.type == 'video'%}
            {% with block.value as media %}
              <div class="media-player">
                <div class="media-player__wrapper media-player__wrapper--video">
                  {% if not is_via_freebasics %}
                    <div class="media-player__embed">
                      <video poster="{% if media.thumbnail %}{{ media.thumbnail.url }}{% endif %}" 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>
                    <div class="media-player__download">
                      <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Video', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                        {% trans "Download" %}
                      </a>
                    </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 %}
                </div>
              </div>
            {% endwith %}
          {% elif block.value.type == 'audio'%}
            {% with block.value as media %}
              <div class="media-player">
                <div class="media-player__wrapper media-player__wrapper--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>
                  <div class="media-player__download">
                    <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Audio', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                      {% trans "Download" %}
                    </a>
                  </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 %}
                </div>
              </div>
            {% endwith %}
          {% elif block.block_type == 'numbered_list' %}
            <ol class="ordered-list">
              {% for item in block.value %}
                <li class="ordered-list__item">{{ item|handle_markdown }}</li>
              {% endfor %}
            </ol>
          {% elif block.block_type == 'list' %}
            <ul class="unordered-list">
            {% for item in block.value %}
              <li class="unordered-list__item">
                {{ item|handle_markdown }}
              </li>
            {% endfor %}
            </ul>
          {% else %}
            {{ block }}
          {% endif %}
        {% endfor %}
      </article>
      {% if settings.core.SiteSettings.enable_clickable_tags %}
        <ul class="teaser-tags teaser-tags--non-click">
          {% for tag in self.tags_list %}
            <li class="teaser-tags__item">
              <span class="teaser-tags__title">{{tag}}</span>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
      {% if settings.core.SiteSettings.facebook_sharing or settings.core.SiteSettings.twitter_sharing or settings.core.SiteSettings.whatsapp_sharing or settings.core.SiteSettings.telegram_sharing or settings.core.SiteSettings.viber_sharing %}
        {% if is_watch_ancestor or is_watch_parent or is_watch %}
           <div class="social-media social-media--watch">
             {% if page.homepage_media %}
               {% for block in page.homepage_media %}
                 {% with block.value as media %}
                   <div class="call-to-action call-to-action--watch call-to-action--media-download">
                     <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Video', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                       {% trans "Download" %} {% if media.file.size %}<span class="call-to-action__item--text">({{media.file.size|filesizeformat}})</span>{% endif %}
                     </a>
                   </div>
                 {% endwith %}
               {% endfor %}
             {% endif %}
             {% social_media_article page=page %}
           </div>
         {% elif is_listen_ancestor or is_listen_parent or is_listen %}
           <div class="social-media social-media--listen">
             {% if page.homepage_media %}
               {% for block in page.homepage_media %}
                 {% with block.value as media %}
                   <div class="call-to-action call-to-action--listen call-to-action--media-download">
                     <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Audio', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
                       {% trans "Download" %} {% if media.file.size %}<span class="call-to-action__item--text">({{media.file.size|filesizeformat}})</span>{% endif %}
                     </a>
                   </div>
                 {% endwith %}
               {% endfor %}
             {% endif %}
             {% social_media_article page=page %}
           </div>
         {% else %}
           <div class="social-media">
             {% social_media_article page=page %}
           </div>
         {% endif %}
       {% endif %}
      <a href="{% pageurl section.specific %}" class="call-to-action__item call-to-action__item--nav-back">{% trans "Go back to" %} {{translated_section}}</a>
      {% if is_watch_ancestor or is_watch_parent or is_watch %}
         </div>
         <div class="article-page__second-column">
           {% include "core/related-article-list.html" with teaser_type="grid" %}
         </div>
       </div>
       {% elif is_listen_ancestor or is_listen_parent or is_listen %}
        </div>
         <div class="article-page__second-column">
           {% include "core/related-article-list.html" with teaser_type="grid" %}
         </div>
       </div>
      {% endif %}
    </div>
  </div>
{% endwith %}
{% endblock %}