{% extends "base.html" %}

{% load static %}

{% block title %}
  Joanna Lemon Resources - Resource List
{% endblock title %}
{% block content %}
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="d-flex flex-row justify-content-between">
          {% if request.user.is_authenticated %}
            <div>
              <a class="btn btn-primary" 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>
    <div class="row">
      <div class="col my-3 text-center rounded p-5">
        <h1 class="display-5">High quality educational resources</h1>
        <div class="row">
          <div class="col my-5 text-center">
            <h2 class="display-6">Stuff and intro text</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col mb-5">
          <div class="d-flex justify-content-between align-content-center">
            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
            <img class="mx-2" src="{% static "images/placeholder.png" %}" alt="PLACEHOLDER" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-3 py-3 m-4 bg-white border border-1 rounded">
          <h5>Welcome!</h5>
          <p>
            I love to make clear and colourful resources and can't resist using rainbow colours
            which so often help make learning visually clearer. I'd love to know what you think of
            what you download, don't hesitate to let me know if you have any suggestions or requests...
            I am also available to tutor younger learners online via Sherpa!
          </p>
        </div>
        <div class="col py-3 m-4 bg-white border border-1 rounded">
          <h2 class="text-primary">Subscriptions available now!</h2>
          <p>
            I love to make clear and colourful resources and can't resist using rainbow colours
            which so often help make learning visually clearer. I'd love to know what you think of
            what you download, don't hesitate to let me know if you have any suggestions or requests...
            I am also available to tutor younger learners online via Sherpa!
          </p>
          <h4>What is available?</h4>
          <ul class="list-group">
            <li class="list-group-item">Full access to all resources (over 250 resources)</li>
            <li class="list-group-item">Customised resources upon request</li>
            <li class="list-group-item">New resources coming online all the time</li>
          </ul>
          <a href="#" class="btn btn-primary my-3">Subscribe now</a>
        </div>
      </div>
      <div class="row">
        <div class="col my-5 text-center">
          <h1 class="display-2">Featured resources</h1>
        </div>
        <div class="row">
          <div class="col my-5 text-center">
            <h2 class="display-5">These are my latest resources. They are great!</h2>
          </div>
        </div>
      </div>
      <div class="row my-4">
        <div class="col">
          {% if resource_list %}
            <div class="d-flex flex-row justify-content-between flex-wrap">
              {% for resource in resource_list %}
                <div class="card mx-2 mt-2" style="width: 22rem;">
                  <div class="card-header position-relative">
                    <div class="text-success">
                      Featured
                      <!-- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">£5.99!</span> -->
                    </div>
                  </div>
                  <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>
                    <div class="d-flex flex-row justify-content-start align-content-center">
                      <div>
                        <span class="badge bg-danger me-2">{{ resource.main_resource_category_name }}</span>
                      </div>
                      <div>
                        <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
                      </div>
                    </div>
                    <p class="card-text my-3">{{ resource.description }}</p>
                    <a href="{% url 'resources:resource_detail' resource_id=resource.id %}"
                       class="btn btn-primary">Details</a>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <p>There are no resources</p>
          {% endif %}
        </div>
      </div>
    </div>
  {% endblock content %}
</div>