{% extends "base.html" %}
{% load static %}
{% load markdown_extras %}
{% block title %}
Alphabet Learning - Resource List
{% endblock title %}
{% block content %}
<div class="container">
    <div class="admin-box">
        {% include "resources/admin_bar.html" %}
    </div>

    {# featured resources #}
    {% if featured_resources %}
    <div>
        <h1>Featured resources</h1>
    </div>

    <div class="featured-container">
        {% for featured_resource in featured_resources %}
        {% if featured_resources|length == 1 %}
        <div>
            {% elif featured_resources|length == 2 %}
            <div>
                {% elif featured_resources|length == 3 %}
                <div>
                    {% 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>
                <h1>Standard resources</h1>
            </div>

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


            <div>
                {% for resource in page_obj.object_list %}
                <div 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>
                <div>
                    <nav aria-label="Page navigation">
                        <ul>
                            {% if page_obj.has_previous %}
                            <li>
                                <a href="?page=
                                         {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
                            </li>
                            {% else %}
                            <li>
                                <span>Previous</span>
                            </li>
                            {% endif %}

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

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