{% extends 'lists/layout.html' %}
{% load i18n %}
{% load utilities %}

{% block breadcrumbs %}
<nav class="breadcrumb subtitle" aria-label="breadcrumbs">
    <ul>
        <li><a href="{% url 'lists' %}">{% trans "Lists" %}</a></li>
        <li><a href="{% url 'list' list.id %}">{{ list.name|truncatechars:30 }}</a></li>
        <li class="is-active">
            <a href="#" aria-current="page">
                {% trans "Curate" %}
            </a>
        </li>
    </ul>
</nav>
{% endblock %}

{% block panel %}
<section class="block">
    <h2 class="title is-4">{% trans "Pending Books" %}</h2>

    {% if not pending.exists %}
        <p><em>{% trans "You're all set!" %}</em></p>
    {% else %}

    <div class="columns">
        {% for item in pending %}
        {% with book=item.book %}
            <div class="column">
                <div class="columns is-mobile">
                    <a
                        class="column is-cover"
                        href="{{ book.local_path }}"
                        aria-hidden="true"
                    >
                        {% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' size_mobile='xsmall' size='small' %}
                    </a>

                    <div class="column ml-3">
                        {% include 'snippets/book_titleby.html' %}
                        {% if item.notes %}
                        <div>
                            {% url 'user-feed' item.user|username as user_path %}
                            {% blocktrans trimmed with username=item.user.display_name %}
                            <a href="{{ user_path }}">{{ username }}</a> says:
                            {% endblocktrans %}
                            <p class="notification">
                                {{ item.notes }}
                            </p>
                        </div>
                        {% endif %}

                        <p>
                            {% trans "Suggested by" %}

                            <a href="{{ item.user.local_path }}">
                                {{ item.user.display_name }}
                            </a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="column is-narrow">
                <div class="field has-addons">
                    <form class="control" method="POST" action="{% url 'list-curate' list.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="item" value="{{ item.id }}">
                        <input type="hidden" name="approved" value="true">
                        <button type="submit" class="button">{% trans "Approve" %}</button>
                    </form>
                    <form class="control" method="POST" action="{% url 'list-curate' list.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="item" value="{{ item.id }}">
                        <input type="hidden" name="approved" value="false">
                        <button type="submit" class="button is-danger is-light">{% trans "Discard" %}</button>
                    </form>
                </div>
            </div>
        {% endwith %}
        {% endfor %}
    </div>
    {% endif %}
</section>
{% endblock %}