{% extends "cast/cast_base.html" %}
{% load i18n %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
  <div class="cast-post-list-header">
    <div>
      <h1 class="display-3">{{ blog.title }}</h1>
      <p class="lead">
        {{ blog.description }}
      </p>
    </div>
    {% block feeds %}
    <!--
    <div class="cast-feeds-container">
      <div class="cast-feed-item">
        <img class="cast-feed-icon" src="{% static 'img/cast/Feed-icon.svg' %}"></img>
        <a href="{% url "cast:latest_entries_feed" slug=blog.slug %}">
          Plain RSS
        </a>
      </div>
      <div class="cast-feed-item">
        <img class="cast-feed-icon" src="{% static 'img/cast/Feed-icon.svg' %}"></img>
        <a href="{% url "cast:podcast_feed_rss" slug=blog.slug audio_format='m4a' %}">Podcast RSS MP4 <img src="{% static 'img/cast/Feed-icon.svg' %}" alt="Podcast RSS-Feed m4a"></img></a>
      </div>
      <div class="cast-feed-item">
        <img class="cast-feed-icon" src="{% static 'img/cast/Feed-icon.svg' %}"></img>
        <a href="{% url "cast:podcast_feed_atom" slug=blog.slug audio_format='m4a' %}">
          Podcast Atom MP4
        </a>
      </div>
    </div>
    -->
    <div>
      <div class="cast-feeds-container">
        <div class="cast-feed-item">
          <img class="cast-feed-icon" src="{% static 'img/cast/Feed-icon.svg' %}"></img>
          <a href="{% url "cast:latest_entries_feed" slug=blog.slug %}">
            Plain RSS
          </a>
        </div>
      </div>
      {% if blog.is_podcast %}
        <ul>
          <li>
            <a href="{% url "cast:podcast_feed_rss" slug=blog.slug audio_format='m4a' %}">
              Podcast RSS MP4
            </a>
          </li>
          <li>
            <a href="{% url "cast:podcast_feed_atom" slug=blog.slug audio_format='m4a' %}">
              Podcast Atom MP4
            </a>
          </li>
        </ul>
      {% endif %}
    </div>
    {% endblock feeds %}
  </div>
  {% block filters %}
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
              Filters / Fulltext-Search
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            <form action="" method="get">
                {{ filter.form | crispy }}
                <input class="btn btn-primary btn-lg" role="button" type="submit" />
            </form>
          </div>
        </div>
      </div>
    </div>
  {% endblock filters %}
  {% if user.is_authenticated %}
      <a class="btn btn-primary btn-lg" role="button" href="{% url "cast:post_create" slug=blog.slug %}">Create Arcticle</a>
  {% endif %}
  <hr class="my-4">

{% for post in posts %}
  <article>
    <header>
      <h1>{{ post.title }}</h1>
      <a href="{% url "cast:post_detail" blog_slug=blog.slug slug=post.slug %}">
        <time date-time="{{ post.visible_date|date:"c" }}">{{ post.visible_date|date}}</time>
        - {{ post.author.username | title}}
      </a>
    </header>
    <section>
      {{ post.description|safe }}
    </section>
  </article>
  <a href="{% url "cast:post_detail" blog_slug=blog.slug slug=post.slug %}">
      Shownotes | {% trans "Comments" %} | Permalink
  </a>
  <hr class="my-4">
{% endfor %}

<p>{% include "pagination.html" %}</p>
<!--
<nav aria-label="pagination">
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">future</a><li>
    {% endif %}
    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">past</a></li>
    {% endif %}
  </ul>
</nav>
-->
{% endblock content %}

{% block javascript %}
  {{ block.super }}
  <script src="{% static 'js/cast/gallery.js' %}"></script>
  <script src="https://cdn.podlove.org/web-player/embed.js"></script>
  {% for post in posts %}
    {% for pk, audio in post.media_lookup.audio.items %}
      <script>podlovePlayer("#audio_{{pk}}", "{{audio.podlove_url}}");</script>
    {% endfor %}
  {% endfor %}
{% endblock javascript %}
