{% extends "base.html" %}
{% load static %}
{% load markdown_extras %}
{% block title %}
    Alphabet Learning - Resource List
{% endblock title %}
{% block content %}

    <div class="row my-4">
        {% include "resources/admin_bar.html" %}
    </div>

    {# featured resources #}
    {% if featured_resources %}
        <div class="row my-4 text-center">
            <h5 class="display-6">Featured resources</h5>
        </div>

        <div class="row">
        {% for featured_resource in featured_resources %}
            {% if featured_resources|length == 1 %}
                <div class="col-lg-12 col-md-12 col-sm-12 mb-4 resource-card">
            {% elif featured_resources|length == 2 %}
                <div class="col-lg-6 col-md-6 col-sm-12 mb-4 resource-card">
            {% elif featured_resources|length == 3 %}
                <div class="col-lg-4 col-md-6 col-sm-12 mb-4 resource-card">
            {% endif %}
        {% include "resources/resource_card_featured.html" with resource=featured_resource %}
        </div>
        {% endfor %}
    </div>
    {% else %}
        <p>There are no featured resources</p>
    {% endif %}

    {# standard resources #}
    <div class="row my-4 text-center">
        <div class="col">
            <h5 class="display-6 text-display-secondary">Standard resources</h5>
        </div>
    </div>

    <!-- Tabbed navigation bar for filtering -->
    <ul class="nav nav-tabs mb-4" id="resourceTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
        </li>
        {% for category in categories %}
            <li class="nav-item">
                <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
                   href="?category={{ category.name }}">{{ category.name|title }}</a>
            </li>
        {% endfor %}
    </ul>


    <div class="row">
        {% for resource in page_obj.object_list %}
            <div class="col-md-6 mb-4" data-type="{{ resource.main_resource_category_name }}">
                {% include "resources/resource_card_standard.html" with resource=resource %}
            </div>
        {% endfor %}
    </div>

    {# Pagination #}
    {% if page_obj.has_other_pages %}
        <div class="row my-4">
            <div class="col">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=
                                        {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Previous</span>
                            </li>
                        {% endif %}

                        {% for page_num in page_obj.paginator.page_range %}
                            {% if page_obj.number == page_num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page_num }}</span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=
                                            {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page=
                                        {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">Next</span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    {% endif %}
{% endblock content %}