{% extends "base.html" %}

{% block title %}
  Joanna Lemon Resources - Resource List
{% endblock title %}
{% block content %}

  <div class="container">

    <div class="row bg-white">
      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
        {% if request.user.is_authenticated %}
          <div>
            <a href="{% url 'resources:create_resource' %} ">Add a new resource</a>
          </div>
          <div>
            Logged in as {{ request.user.email }}
          </div>
          <div>
            <form action="{% url 'account_logout' %}" method="post">
              {% csrf_token %}
              <button type="submit">Log out</button>
            </form>
          </div>
        {% endif %}
      </div>
    </div>


    <div class="row my-4">
      <div class="col-6 bg-white pt-3 border border-success border-opacity-25 rounded">
        {% if resource_list %}
          {% for resource in resource_list %}
            <div>
              <div>
                <a class="no-underline"
                   href="{% url 'resources:resource_detail' resource_id=resource.id %}">
                  <h1 class="resource-title">{{ resource.name }}</h1>
                </a>
              </div>
              <div>
                <div class="card" style="width: 18rem;">
                  <img class="card-img-top" src="{{ resource.thumbnail_urls|first }}"
                       alt="{{ resource.thumbnail_filename }}">
                  <div class="card-body">
                    <h5 class="card-title">{{ resource.name }}</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                      card's content.</p>
                    <a href="{% url 'resources:resource_detail' resource_id=resource.id %}" class="btn btn-primary">More...</a>
                  </div>
                </div>


                <div>Main category: {{ resource.main_resource_category_name }}</div>
                {% if resource.additional_resource_category_name %}
                  <div>Additional category: {{ resource.additional_resource_category_name }}</div>
                {% endif %}
              </div>
            </div>
            <div>
              <div class="resource-img-detail">
                {#            {% for img in resource.thumbnail_urls %}#}
                {#              <img style="max-height: 400px;#}
                {#                          width: auto"#}
                {#                   src="{{ img }}"#}
                {#                   alt="{{ resource.thumbnail_filename }}" />#}
                {#            {% endfor %}#}
                <img style="max-height: 300px; width: auto" src="{{ resource.thumbnail_urls|first }}"
                     alt="{{ resource.thumbnail_filename }}">
              </div>
              <div>
                Click
                <button hx-get="/hx-download-btn?rn={{ resource.pdf_filename }}"
                        hx-target="next #download-reveal">here
                </button>
                to download the resource
              </div>
              <div id="download-reveal"></div>
            </div>
          {% endfor %}
        {% else %}
          <p>There are no resources</p>
        {% endif %}

      </div>
    </div>
  </div>
{% endblock content %}