{% extends "base.html" %}

{% block content %}
  {% include "base_navbar.html" %}
  {% include "base_heading.html" %}

  <div id="main" class="mx-0 px-0">
    <div class="row w-100 mx-0">
      <div class="col-0 col-sm-3">
      </div>
      <div class="col-12 col-sm-6 px-0 mx-0">
        {% for i in feeds %}
          <div class="card mx-1 mb-3">
            <h2 style="font-size: 1.5rem" class="text-center mt-2">
              {{ i.title }}
            </h2>
            <div class="container w-100 mb-2">
              <div class="row">
                <div class="col-3 d-flex flex-column justify-content-center">
                  <img src="{{ IMAGES_URL }}{{ i.image }}" alt="{{ i.image_title }}">
                </div>
                <div class="col-9 d-flex flex-column justify-content-around">
                    <p class="text-center mb-2 mt-3">{{ i.created_on }}</p>
                    <div class="d-flex flex-row justify-content-around align-items-center">
                      <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:feed' pk=i.pk slug=i.slug %}">Items</a></p>
                      <p class="mb-1"><a type="button" class="btn btn-dark" href="#x{{ i.slug }}-rss" data-toggle="collapse">PodCast</a></p>
                    </div>
                    <a href="#x{{ i.slug }}-attributions" data-toggle="collapse" class="text-center text-dark" style="text-decoration: underline">license/attribution</a>
                </div>
              </div>
                    <div id="x{{ i.slug }}-rss" class="collapse">
                      <hr class="my-2">
                      <div class="d-flex flex-row justify-content-around flex-wrap">
                        <p class="mb-1"><a type="button" class="btn btn-dark" href="{{ i.get_itpc_rss }}">BeyondPod</a></p>
                        <p class="mb-1"><a type="button" class="btn btn-dark" href="{% url 'audio:rss' slug=i.slug %}">RSS</a></p>
                        <p class="mb-1"><a type="button" class="btn btn-dark" href="{{ i.get_itpc_rss }}">Other ITPC</a></p>
                        <p class="mb-1"><a type="button" class="btn btn-dark" href="{{ i.get_itpc_rss }}">AntennaPod</a></p>
                        <p class="mb-1"><a type="button" class="btn btn-dark" href="{{ i.get_itpc_rss }}">Podcast Addict</a></p>
                      </div>
                      <hr class="my-1">
                    </div>
                    <div id="x{{ i.slug }}-attributions" class="collapse text-justify">
                      Photo <a href="{{ i.original_image_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_title }}</a> by
                      {% if i.image_attribution_url == '' %}
                        {{ i.image_attribution }}
                      {% else %}
                        <a href="{{ i.image_attribution_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_attribution }}</a>
                      {% endif %}
                      is licensed <a href="{{ i.image_license_url }}" class="text-dark" style="text-decoration: underline">{{ i.image_license_name }}</a>
                      {{ i.image_license_jurisdiction }}.
                      <hr class="my-1">
                      <a href="{{ i.ebook_url }}" class="text-dark" style="text-decoration: underline">{{ i.ebook_title }}</a> by
                      <a href="{{ i.author_url }}" class="text-dark" style="text-decoration: underline">{{ i.author }}</a>
                      is licensed <a href="{{ i.license_url }}" class="text-dark" style="text-decoration: underline">{{ i.license_name }}</a>
                      {{ i.license_jurisdiction }}.
                      {% if i.translator != '' %}
                        Translated by <a href="{{ i.translator_url }}" class="text-dark" style="text-decoration: underline">{{ i.translator }}</a>.
                      {% endif %}
                      {% if i.intro_author != '' %}
                        Intro by <a href="{{ i.intro_author_url }}" class="text-dark" style="text-decoration: underline">{{ i.intro_author }}</a>.
                      {% endif %}
                      <hr class="my-1">
                    </div>
                    <p class="text-justify mt-2 mb-0">{{ i.description }}</p>
            </div>
          </div>

            {% if user.is_authenticated %}
              {% if user == i.user %}
                <div class="container w-100 d-flex justify-content-around my-1">
                  <div>
                    <a href="{% url 'audio:edit_feed' pk=i.pk title_slug=i.slug %}" class="text-dark" style="text-decoration: underline">Edit Feed?</a>
                  </div>
                  <div>
                    <a href="{% url 'audio:new_episode' feed_pk=i.pk feed_title_slug=i.slug %}" class="text-dark" style="text-decoration: underline">New Episode?</a>
                  </div>
                </div>
              {% endif %}
            {% endif %}
        {% endfor %}
      </div>
      <div class="col-0 col-sm-3">
      </div>
    </div>

{% endblock %}