{% extends "layout.html" %}
{% load i18n %}

{% block title %}{% trans "Discover" %}{% endblock %}

{% block content %}

<section class="block">
    <header class="block content has-text-centered">
        <h1 class="title">{% trans "Discover" %}</h1>
        <p class="subtitle">
            {% blocktrans trimmed with site_name=site.name %}
            See what's new in the local {{ site_name }} community
            {% endblocktrans %}
        </p>
    </header>

    {% with tile_classes="tile is-child box has-background-secondary is-clipped" %}
    <div class="tile is-ancestor">
        <div class="tile is-6 is-parent">
            <div class="{{ tile_classes }}">
                {% include 'discover/large-book.html' with status=large_activities.0 %}
            </div>
        </div>
        <div class="tile is-6 is-parent">
            <div class="{{ tile_classes }}">
                {% include 'discover/large-book.html' with status=large_activities.1 %}
            </div>
        </div>
    </div>

    <div class="tile is-ancestor">
        <div class="tile is-vertical is-6">
            <div class="tile is-parent">
                <div class="{{ tile_classes }}">
                    {% include 'discover/large-book.html' with status=large_activities.2 %}
                </div>
            </div>
            <div class="tile">
                <div class="tile is-parent is-6">
                    <div class="{{ tile_classes }}">
                        {% include 'discover/small-book.html' with status=small_activities.0 %}
                    </div>
                </div>
                <div class="tile is-parent is-6">
                    <div class="{{ tile_classes }}">
                        {% include 'discover/small-book.html' with status=small_activities.1 %}
                    </div>
                </div>
            </div>
        </div>
        <div class="tile is-vertical is-6">
            <div class="tile">
                <div class="tile is-parent is-6">
                    <div class="{{ tile_classes }}">
                        {% include 'discover/small-book.html' with status=small_activities.2 %}
                    </div>
                </div>
                <div class="tile is-parent is-6">
                    <div class="{{ tile_classes }}">
                        {% include 'discover/small-book.html' with status=small_activities.3 %}
                    </div>
                </div>
            </div>
            <div class="tile is-parent">
                <div class="{{ tile_classes }}">
                    {% include 'discover/large-book.html' with status=large_activities.3 %}
                </div>
            </div>
        </div>
    </div>

    <div class="tile is-ancestor">
        <div class="tile is-6 is-parent">
            <div class="{{ tile_classes }}">
                {% include 'discover/large-book.html' with status=large_activities.4 %}
            </div>
        </div>
        <div class="tile is-6 is-parent">
            <div class="{{ tile_classes }}">
                {% include 'discover/large-book.html' with status=large_activities.5 %}
            </div>
        </div>
    </div>
    {% endwith %}
</section>

<div class="block">
    {% include 'snippets/pagination.html' with page=large_activities %}
</div>
{% endblock %}