{% extends 'search/layout.html' %}
{% load i18n %}

{% block panel %}

{% if results %}
{% with results|first as local_results %}
<ul class="block">
{% for result in local_results.results %}
    <li class="pd-4 mb-5">
        <div class="columns is-mobile is-gapless mb-0">
            <div class="column is-cover">
                {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' %}
            </div>

            <div class="column is-10 ml-3">
                <p>
                    <strong>
                        {% include "snippets/book_titleby.html" with book=result %}
                    </strong>
                </p>
                <p>
                    {% if result.first_published_date or result.published_date %}
                        ({% firstof result.first_published_date.year result.published_date.year %})
                    {% endif %}
                </p>
            </div>
        </div>
    </li>
{% endfor %}
</ul>
{% endwith %}

<div class="block">
{% for result_set in results|slice:"1:" %}
    {% if result_set.results %}
    <section class="mb-5">
        {% if not result_set.connector.local %}
        <details class="details-panel box" open>
        {% endif %}
            {% if not result_set.connector.local %}
            <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
                <span class="mb-0 title is-5">
                    {% trans 'Results from' %}
                    <a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
                </span>

                <span class="details-close icon icon-x" aria-hidden="true"></span>
            </summary>
            {% endif %}

        <div class="mt-5">
            <div class="is-flex is-flex-direction-row-reverse">
                <ul class="is-flex-grow-1">
                    {% for result in result_set.results %}
                        <li class="{% if not forloop.last %}mb-5{% endif %}">
                            <div class="columns is-mobile is-gapless">
                                <div class="column is-1 is-cover">
                                    {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' external_path=True %}
                                </div>
                                <div class="column is-10 ml-3">
                                    <p>
                                        <strong>
                                            <a
                                                href="{{ result.view_link|default:result.key }}"
                                                rel="noopener noreferrer"
                                                target="_blank"
                                            >{{ result.title }}</a>
                                        </strong>
                                    </p>
                                    <p>
                                        {{ result.author }}
                                        {% if result.year %}({{ result.year }}){% endif %}
                                    </p>
                                    <form class="mt-1" action="/resolve-book" method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="remote_id" value="{{ result.key }}">
                                        <div class="control">
                                            <button type="submit" class="button is-small is-link">
                                                {% trans "Import book" %}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% if not result_set.connector.local %}
        </details>
        {% endif %}
    </section>
    {% endif %}
    {% endfor %}
</div>


{% endif %}

<p class="block">
    {% if request.user.is_authenticated %}
        {% if not remote %}
        <a href="{{ request.path }}?q={{ query }}&type=book&remote=true">
            {% trans "Load results from other catalogues" %}
        </a>
        {% else %}
        <a href="{% url 'create-book' %}">
            {% trans "Manually add book" %}
        </a>
        {% endif %}
    {% else %}
        <a href="{% url 'login' %}">
            {% trans "Log in to import or add books." %}
        </a>
    {% endif %}
</p>

{% endblock %}