{% extends "./base.html" %}
{% load wagtailcore_tags %}
{% load crispy_forms_tags %}
{% load static %}
{% load django_vite %}

{% block body_class %}template-bloglistpage{% endblock %}

{% block meta %}
  {{ block.super }}
  {% if blog.noindex %}
    <meta name="robots" content="noindex">
  {% endif %}
{% endblock %}

{% block content %}
  <div class="cast-post-list-header">
    <div>
      <h1 class="display-3">{{ page.title }}</h1>
      <p class="lead">
        <div class="intro">{{ page.description|richtext }}</div>
      </p>
    </div>

    {% block feeds %}
      <div>
        <div class="cast-feeds-container">
          <div class="cast-feed-item">
            <img class="cast-feed-icon" src="{% static 'cast/img/Feed-icon.svg' %}" height=64 width=64>
            <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=page.blog.slug audio_format='m4a' %}">
                Podcast RSS MP4
              </a>
            </li>
            <li>
              <a href="{% url "cast:podcast_feed_atom" slug=page.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">
              {{ filterset.form | crispy }}
              <input class="btn btn-primary btn-lg" role="button" type="submit" />
            </form>
          </div>
        </div>
      </div>
    </div>
  {% endblock filters %}
  <hr class="my-4">

  <div id="paging-area">
    <main>
      {% for post in posts %}
        {% include "./post_body.html" with render_detail=False page=post %}
        <hr class="my-4">
      {% endfor %}
    </main>

    <footer>
      <p>{% include "./pagination.html" %}</p>
    </footer>
  </div>
{% endblock content %}

{% block javascript %}
  <!-- block.super does not work? -->
  {{ block.super }}

  {% vite_hmr_client app="cast" %}
  {% vite_asset 'src/gallery/image-gallery-bs4.ts' app="cast" %}

  {% if use_audio_player %}
    <script src={% static 'cast/js/web-player/embed.4.js' %}></script>
    {% for post in posts %}
      {% for pk, audio in post.media_lookup.audio.items %}
        <script>podlovePlayer("#audio_{{ audio.pk }}", "{{ audio.podlove_url }}");</script>
      {% endfor %}
    {% endfor %}
  {% endif %}
{% endblock javascript %}
