{% load betty core ads %}

<header class="series-summary">
  <div class="series-logo">
    <div class="series-image"></div>
  </div>
  <ul class="series-meta">
    <li><h1 class="series-title"></h1></li>
    <li class="series-episodes"></li>
    <li><p class="series-description"></p></li>
  </ul>
</header>

<section class="latest-episode">
 <p>Watch The Latest Episode</p>
</section>

{% if channel_slug == 'the-av-club' %}
  <div class="latest-episode-container">
    <figure class="video-container">
      <div class="content">
        <bulbs-video
          twitter-handle="{{ twitter_handle }}"
          data-videohub-base="{{ VIDEOHUB_BASE_URL }}"
        >
        </bulbs-video>
      </div>
    </figure>
    <div id="latest-video-title"></div>
  </div>
  {% else %}
    <div class="latest-episode-container">
      <figure class="video-container">
        <div class="content">
          <bulbs-video
              twitter-handle="{{ twitter_handle }}"
              data-videohub-base="{{ VIDEOHUB_BASE_URL }}">
          </bulbs-video>
        </div>
      </figure>

      <div class="latest-episode-data">
        <div class="series-title"></div>
        <hr>
        <div id="latest-video-title"></div>
        <div id="latest-video-description"></div>
        <share-tools
            class="circle-transparent latest-video-share-tools"
            share-url={{ share_url }}
            share-track-action="Single Series: Share">
          <share-via-facebook icon ></share-via-facebook>
          <share-via-twitter icon twitter-handle={{twitter_handle}}></share-via-twitter>
          <share-via-email icon message={{share_message}}></share-via-email>
        <share-tools>
      </div>
    </div>
    <div class="video-series-ad">
      <div class="ad-alert">Advertisement</div>
        {% dfp_ad "non-mobile-leaderboard" %}
        {% dfp_ad "mobile-only-cube" %}
    </div>
  {% endif %}
<section class="video-grid">
  {% if channel_slug == 'the-onion' %}
    {% include "videos/series-carousel.html" %}
  {% endif %}
  {% if channel_slug == 'the-av-club' %}
    <header>
      <h2>Episodes</h2>
      <div class="video-grid-pagination-button">
        <previous-button
            data-track-action="Single Series: Episodes Prev"
            data-track-label="#">
          <i class="fa fa-angle-left"></i>
        </previous-button>
        <next-button
            data-track-action="Single Series: Episodes Next"
            data-track-label="#">
            <i class="fa fa-angle-right"></i>
        </next-button>
      </div>

    </header>
  {% endif %}
  <div class="video-list"
       id="series-video-list"
       data-betty-url="{{ BETTY_ONION_STUDIOS_IMAGE_URL }}"
       data-videohub-base="{{ VIDEOHUB_BASE_URL }}"
       data-channel-slug="{{ channel_slug }}"
       data-series-slug="{{ series_slug }}">
  </div>
</section>
