path: root/alphabetlearning/templates/resources/resource_list.html

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

    <div>
        {% include "resources/admin_bar.html" %}
    </div>

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

        <div>
        {% 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>
        <div>
            <h1>Standard resources</h1>
        </div>
    </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 %}