{% extends "base_juice.html" %}

{%- macro page_entry(entry, category_key, page_key) -%}
<div class="col-6 col-sm-4 col-md-3 col-lg-3 col-xl-2 col-xxl-2 d-flex max-w-16">
    <div class="card card-hover h-100 w-100">
        <img src="{{ base_url }}/api/page/thumbnail?category={{ category_key }}&page={{ page_key }}" class="card-img-top logo" alt="{{ entry.name }}">
        <div class="card-body">
            <h5 {% if entry.new_tab %} class="new-tab" {% endif %}>{{ entry.name }}</h5>
            {%- if entry.description -%}
            <p class="card-text"><small>{{ entry.description }}</small></p>
            {%- endif -%}
            <a class="stretched-link hidden-link" href="{{ format_url(entry.url) }}" {% if entry.new_tab %} target="_blank" {% endif %}></a>
        </div>
    </div>
</div>
{%- endmacro -%}

{% block content %}
<div class="block">
    <h1>Home</h1>
    {%- for category_key, category in categories.items() | sort(attribute="1.order,1.name") -%}
        {%- if category.pages -%}
        <h5>{{ category.name }}</h5>
        <div class="container-fluid p-0 pb-4 pt-2">
            <div class="row g-3">
                {%- for page_key, page in category.pages.items() | sort(attribute="1.order,1.name") -%}
                    {{ page_entry(page, category_key, page_key) }}
                {%- endfor -%}
            </div>
        </div>
        {%- endif -%}
    {%- endfor -%}

</div>
{% endblock %}