{% extends "./base.html" %}
{% load i18n %}

{% block title %}{% if is_podcast %}{% trans "Subscribe" %}{% else %}{% trans "Feeds" %}{% endif %} – {{ blog.title }}{% endblock %}

{% block content %}
  <div class="cast-reading mt-4">
    <h1>{% if is_podcast %}{% trans "Subscribe" %}{% else %}{% trans "Feeds" %}{% endif %} – {{ blog.title }}</h1>

    {% if is_podcast %}
      {% if apple_podcasts_url or spotify_url or youtube_url %}
        <section class="mt-4">
          <h2>{% trans "Where to listen" %}</h2>
          <div class="cast-platform-buttons">
            {% if apple_podcasts_url %}
              <a class="cast-platform-btn" href="{{ apple_podcasts_url }}" target="_blank" rel="noopener">
                <svg width="20" height="20" viewBox="0 0 50 50" fill="currentColor" aria-hidden="true" focusable="false">
                  <path d="M25 2C12.3 2 2 12.3 2 25s10.3 23 23 23 23-10.3 23-23S37.7 2 25 2zm0 10c7.2 0 13 5.8 13 13 0 3.5-1.4 6.7-3.6 9l-2.8-2.8C33.1 29.6 34 27.4 34 25c0-5-4-9-9-9s-9 4-9 9c0 2.4.9 4.6 2.4 6.2l-2.8 2.8C13.4 31.7 12 28.5 12 25c0-7.2 5.8-13 13-13zm0 8a5 5 0 11-.001 10.001A5 5 0 0125 20zm-2 14h4l1 10h-6l1-10z"/>
                </svg>
                Apple Podcasts
              </a>
            {% endif %}
            {% if spotify_url %}
              <a class="cast-platform-btn" href="{{ spotify_url }}" target="_blank" rel="noopener">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
                  <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
                </svg>
                Spotify
              </a>
            {% endif %}
            {% if youtube_url %}
              <a class="cast-platform-btn" href="{{ youtube_url }}" target="_blank" rel="noopener">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
                  <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                </svg>
                YouTube
              </a>
            {% endif %}
          </div>
        </section>
      {% endif %}

      {% block podlove_subscribe_button %}{% endblock podlove_subscribe_button %}
    {% endif %}

    <section class="mt-4">
      <h2>{% trans "Feeds" %}</h2>
      <div class="cast-feeds-container">
        <a class="cast-feed-link" href="{{ blog_feed_url }}">
          <svg class="cast-feed-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
          RSS
        </a>
        <a class="cast-feed-link" href="{{ blog_atom_feed_url }}">
          <svg class="cast-feed-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
          Atom
        </a>
      </div>
    </section>

    {% if is_podcast %}
      <section class="mt-4">
        <h2>{% trans "Podcast Feeds" %}</h2>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>{% trans "Format" %}</th>
                <th>RSS</th>
                <th>Atom</th>
              </tr>
            </thead>
            <tbody>
              {% for feed in podcast_feeds %}
                <tr>
                  <td>{{ feed.format_label }}</td>
                  <td><a href="{{ feed.rss_url }}">RSS</a></td>
                  <td><a href="{{ feed.atom_url }}">Atom</a></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>
    {% endif %}
  </div>
{% endblock content %}