{% comment %}
  This module displays a nice card for the given video.
  It includes the video's thumbnail, title, release-date, short description
  (excerpt) as well as links to YouTube and the internal video page.

  Parameters:
    - video Video     The video to display.
{% endcomment %}


<div class="video-card">

  {% comment %} Use right link based on the video's date. {% endcomment %}
  {% if include.video.date <= site.time %}
    <a href="{{ include.video.url | relative_url }}"
       aria-label="To the {{ include.video.video_type_short | default: include.video.video_type }}: {{ include.video.title | xml_escape }}"
    >
  {% else %}
    <a href="https://www.youtube.com/thecodingtrain/live"
       target="blank"
       aria-label="Tune in Live: {{ include.video.title | xml_escape }}"
    >
  {% endif %}

    {% comment %} Video thumbnail. {% endcomment %}
    <div class="video-header">
      <div class="thumb-container">

        {% comment %} The video badge (with its number). {% endcomment %}
        {% include 1-tools/series-for-video.html video=video %}
        <span class="video-badge">#{% if out_series.series_number%}{{ out_series.series_number }}.{% endif %}{{ include.video.video_number }}</span>

        <div
          class="video-thumbnail"

          {% if include.video.video_id %}
            style="background-image: url(https://i.ytimg.com/vi/{{include.video.video_id}}/mqdefault.jpg)"
          {% else %}
            style="background-image: url({{ '/assets/images/streamcover.jpg' | relative_url }})"
          {% endif %}
        >
        </div>
      </div>

      {% comment %} Video title. {% endcomment %}
      <h3>{{ include.video.title | xml_escape }}</h3>

      {% comment %} Release date. {% endcomment %}
      {% if include.video.date > site.time %}
        <span class="video-date">{{ include.video.date | date: '%d %b %Y - %H:%M %Z' }}</span>
      {% else %}
        <span class="video-date">{{ include.video.date | date_to_string }}</span>
      {% endif %}
    </div>
  </a>

  {% comment %} Short description/excerpt. {% endcomment %}
  <div class="video-description">
    {{ include.video.excerpt }}
  </div>

  {% comment %} CTAs (link to YouTube and internal video page or livestream). {% endcomment %}
  <div class="buttons">
    {% if include.video.date > site.time %}
      <a href="https://www.youtube.com/thecodingtrain/live"
         target="blank"
         aria-label="Tune in Live: {{ include.video.title | xml_escape }}"
      >
        Tune in Live<span class="sr-only">: {{ include.video.title | xml_escape }}</span>
      </a>
    {% else %}
      <a href="https://youtu.be/{{ include.video.video_id }}"
         aria-label="Watch on Youtube: {{ include.video.title | xml_escape }}"
      >
        Watch on YT<span class="sr-only">: {{ include.video.title | xml_escape }}</span>
      </a>
      <a href="{{ include.video.url | relative_url }}"
         aria-label="To the {{ include.video.video_type_short | default: include.video.video_type }}: {{ include.video.title | xml_escape }}"
      >
        To the {{ include.video.video_type_short | default: include.video.video_type }}<span class="sr-only">: {{ include.video.title | xml_escape }}</span>
      </a>
    {% endif %}
  </div>
</div>