{% 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 class="section-title">Featured resources</h1>
    </div>

    <div class="bulk-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra ante vel ornare sagittis. Integer ac nisi tellus. Aenean tempus eleifend ipsum eget iaculis. Donec vehicula tortor malesuada sapien semper, quis fermentum turpis laoreet. Sed pulvinar vitae nibh et posuere. Aenean sed metus in tellus sagittis aliquam vel eu dui. Aliquam tellus purus, semper ut ligula in, pharetra maximus massa. Sed ut ipsum sit amet felis vulputate efficitur a vitae ex. Vestibulum hendrerit dapibus ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed malesuada dui. Phasellus at risus in tortor sagittis faucibus. Curabitur imperdiet, turpis et varius efficitur, odio nibh rhoncus odio, vitae tincidunt turpis magna sed risus. Duis venenatis at tortor vel commodo.</p>
    </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 class="section-title">Standard resources</h1>
            </div>
            <div class="bulk-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra ante vel ornare sagittis. Integer ac nisi tellus. Aenean tempus eleifend ipsum eget iaculis. Donec vehicula tortor malesuada sapien semper, quis fermentum turpis laoreet. Sed pulvinar vitae nibh et posuere. Aenean sed metus in tellus sagittis aliquam vel eu dui. Aliquam tellus purus, semper ut ligula in, pharetra maximus massa. Sed ut ipsum sit amet felis vulputate efficitur a vitae ex. Vestibulum hendrerit dapibus ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed malesuada dui. Phasellus at risus in tortor sagittis faucibus. Curabitur imperdiet, turpis et varius efficitur, odio nibh rhoncus odio, vitae tincidunt turpis magna sed risus. Duis venenatis at tortor vel commodo.</p>
            </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 class="standard-grid">
                {% 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>