{% extends 'layout.html' %}
{% block content %}

{% if not request.user.is_authenticated %}
<header class="block has-text-centered">
    <h1 class="title">{{ site.name }}</h1>
    <h2 class="subtitle">{{ site.instance_tagline }}</h2>
</header>

<section class="level is-mobile">
    <div class="level-item has-text-centered">
        <div>
            <p class="title has-text-weight-normal"><span class="icon icon-graphic-paperplane"></span></p>
            <p class="heading">Decentralized</p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="title has-text-weight-normal"><span class="icon icon-graphic-heart"></span></p>
            <p class="heading">Friendly</p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="title has-text-weight-normal"><span class="icon icon-graphic-banknote"></span></p>
            <p class="heading">Anti-Corporate</p>
        </div>
    </div>
</section>

<section class="tile is-ancestor">
    <div class="tile is-7 is-parent">
        <div class="tile is-child box">
            {% include 'snippets/about.html' %}
        </div>
    </div>
    <div class="tile is-5 is-parent">
        <div class="tile is-child box has-background-primary-light content">
            {% if site.allow_registration %}
            <h2 class="title">Join {{ site.name }}</h2>
            <form name="register" method="post" action="/register">
                {% include 'snippets/register_form.html' %}
            </form>
            {% else %}
            <h2 class="title">This instance is closed</h2>
            <p>{{ site.registration_closed_text | safe}}</p>
            {% endif %}
        </div>
    </div>
</section>

{% else %}
<div class="block">
    <h1 class="title has-text-centered">Discover</h1>
</div>
{% endif %}

<div class="block is-hidden-tablet">
    <h2 class="title has-text-centered">Recent Books</h2>
</div>

<section class="tile is-ancestor">
    <div class="tile is-vertical">
        <div class="tile is-parent">
            <div class="tile is-child box has-background-white-ter">
                {% include 'snippets/discover/large-book.html' with book=books.0 %}
            </div>
        </div>
        <div class="tile">
            <div class="tile is-parent is-6">
                <div class="tile is-child box has-background-white-ter">
                    {% include 'snippets/discover/small-book.html' with book=books.1 %}
                </div>
            </div>
            <div class="tile is-parent is-6">
                <div class="tile is-child box has-background-white-ter">
                    {% include 'snippets/discover/small-book.html' with book=books.2 %}
                </div>
            </div>
        </div>
    </div>
    <div class="tile is-vertical">
        <div class="tile">
            <div class="tile is-parent is-6">
                <div class="tile is-child box has-background-white-ter">
                    {% include 'snippets/discover/small-book.html' with book=books.3 %}
                </div>
            </div>
            <div class="tile is-parent is-6">
                <div class="tile is-child box has-background-white-ter">
                    {% include 'snippets/discover/small-book.html' with book=books.4 %}
                </div>
            </div>
        </div>
        <div class="tile is-parent">
            <div class="tile is-child box has-background-white-ter">
                {% include 'snippets/discover/large-book.html' with book=books.5 %}
            </div>
        </div>
    </div>
</section>

{% endblock %}