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

{% block title %}{% trans "Search Results" %}{% endblock %}

{% block content %}
{% with book_results|first as local_results %}
<div class="block">
    <h1 class="title">{% blocktrans %}Search Results for "{{ query }}"{% endblocktrans %}</h1>
</div>

<div class="block columns">
    <div class="column">
        <h2 class="title is-4">{% trans "Matching Books" %}</h2>
        <section class="block">
            {% if not local_results.results %}
            <p>{% blocktrans %}No books found for "{{ query }}"{% endblocktrans %}</p>
            {% else %}
            <ul>
            {% for result in local_results.results %}
                <li class="pd-4">
                    {% include 'snippets/search_result_text.html' with result=result %}
                </li>
            {% endfor %}
            </ul>
            {% endif %}
        </section>

        {% if request.user.is_authenticated %}
        {% if book_results|slice:":1" and local_results.results %}
        <div class="block">
            <h3 class="title is-6 mb-0">
                {% trans "Didn't find what you were looking for?" %}
            </h3>
            {% trans "Show results from other catalogues" as button_text %}
            {% include 'snippets/toggle/open_button.html' with text=button_text small=True controls_text="more-results" %}

            {% if local_results.results %}
            {% trans "Hide results from other catalogues" as button_text %}
            {% include 'snippets/toggle/close_button.html' with text=button_text small=True controls_text="more-results" %}
            {% endif %}
        </div>
        {% endif %}

        <div class="{% if local_results.results %}is-hidden{% endif %}" id="more-results">
            {% for result_set in book_results|slice:"1:" %}
            {% if result_set.results %}
            <section class="box has-background-white-bis">
                {% if not result_set.connector.local %}
                <header class="columns is-mobile">
                    <div class="column">
                        <h3 class="title is-5">
                            Results from
                            <a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
                        </h3>
                    </div>
                    <div class="column is-narrow">
                        {% trans "Show" as button_text %}
                        {% include 'snippets/toggle/open_button.html' with text=button_text small=True controls_text="more-results-panel" controls_uid=result_set.connector.identifier class="is-small" icon="arrow-down" pressed=forloop.first %}
                    </div>
                </header>
                {% endif %}

                <div class="box has-background-white is-shadowless{% if not forloop.first %} is-hidden{% endif %}" id="more-results-panel-{{ result_set.connector.identifier }}">
                    <div class="is-flex is-flex-direction-row-reverse">
                        <div>
                            {% trans "Close" as button_text %}
                            {% include 'snippets/toggle/toggle_button.html' with label=button_text class="delete" nonbutton=True controls_text="more-results-panel" controls_uid=result_set.connector.identifier pressed=forloop.first %}
                        </div>
                        <ul class="is-flex-grow-1">
                        {% for result in result_set.results %}
                            <li class="pb-4">
                                {% include 'snippets/search_result_text.html' with result=result remote_result=True %}
                            </li>
                        {% endfor %}
                        </ul>
                    </div>
                </div>
            </section>
            {% endif %}
            {% endfor %}
        </div>

        <div class="block">
            <a href="/create-book">Manually add book</a>
        </div>
        {% endif %}
    </div>
    <div class="column">
        {% if request.user.is_authenticated %}
        <section class="block">
            <h2 class="title is-4">{% trans "Matching Users" %}</h2>
            {% if not user_results %}
            <p><em>{% blocktrans %}No users found for "{{ query }}"{% endblocktrans %}</em></p>
            {% endif %}
            <ul>
            {% for result in user_results %}
                <li class="block">
                    <a href="{{ result.local_path }}">
                        {% include 'snippets/avatar.html' with user=result %}
                        {{ result.display_name }}
                    </a> ({{ result.username }})
                    {% include 'snippets/follow_button.html' with user=result %}
                </li>
            {% endfor %}
            </ul>
        </section>
        {% endif %}
        <section class="block">
            <h2 class="title is-4">{% trans "Lists" %}</h2>
            {% if not list_results %}
            <p><em>{% blocktrans %}No lists found for "{{ query }}"{% endblocktrans %}</em></p>
            {% endif %}
            {% for result in list_results %}
            <div class="block">
                <ul>
                    <li>
                        <a href="{% url 'list' result.id %}">{{ result.name }}</a>
                    </li>
                </ul>
            </div>
            {% endfor %}
        </section>
    </div>
</div>
{% endwith %}
{% endblock %}