{% extends "header_slim_submenu.html" %}
{%- block title -%}{{ this.title }}{%- endblock -%}
{%- block meta_description -%}
  {%- if this.meta_description is defined and this.meta_description != "" -%}
    {{ this.meta_description }}
  {%- else -%}
    Werkkooperative der Technikfreundinnen eG
  {%- endif -%}
{%- endblock -%}
{% block body %}
  <section class="card_grid -no_pad">
    {% set blog_posts = site.get('/blog').children.order_by('-pub_date').limit(3) %}
    {% set episodes = site.get('/podcast').children.order_by('-pub_date').limit(3) %}
    {% for post in blog_posts %}
      <div class="card_grid__card">
        <div class="card__header">
          <h2 class="card__heading">{{ post.title }}</h2>
          <div class="card__info">
            <p class="card__credits"><img src="../images/pencil_square.svg" alt="geschrieben von">&ensp;{{ post.author }}</p>
            <p class="card__date">{{ post.pub_date|dateformat('long') }}</p>
          </div>
        </div>
        <div class="card__body">
          <div>
            <p>{{ post.meta_description }}</p>
          </div>
          <div class="card__link">
            <p><a href="{{ post.path|url }}">Zum vollständigen Post …</a></a></p>
          </div>
        </div>
      </div>

      {#
      Ist ein wenige hässlich, aber ich habe keine Möglichkeit gefunden ohne Schleife
      auf eine Episode zuzugreifen. Ziel war abwechselnd einen Blogpost und eine Episode
      des Podcasts zu rendern.
      #}
      {% set episodes = site.get('/podcast').children.order_by('-pub_date').offset(loop.index - 1).limit(1) %}
      {% for episode in episodes %}
        <div class="card_grid__card">
          <div class="card__header card__header--podcast">
            <h2 class="card__heading">{{ episode.title }}</h2>
            <div class="card__info">
              <p class="card__credits"><img src="../images/microphone.svg" alt="geschrieben von">&ensp;{{ episode.authors }}</p>
              <p class="card__date">{{ episode.pub_date|dateformat('long') }}</p>
            </div>
          </div>
          <div class="card__body">
            <div>
              <p>{{ episode.podcast_teaser }}</p>
            </div>
            <div class="pod_ctrl_box">
              <audio controls class="pod_ctrl_box__audio_controls">
                {% if episode.podcastogg -%}
                  <source src="{{ episode|url(alt='de')}}{{ episode.podcastogg }}" type="audio/ogg">
                {%- endif %}
                {% if episode.podcastmp3 -%}
                  <source src="{{  episode|url(alt='de') }}{{ episode.podcastmp3 }}" type="audio/mpeg">
                {%- endif %}
                  Your browser does not support the audio element.
              </audio>
            </div>
            <div class="card__link">
              <p><a href="{{ episode.path|url }}">Zur Episode mit Shownotes …</a></a></p>
            </div>
          </div>
        </div>
      {% endfor %}
    {% endfor %}
  </section>
{% endblock %}