{% extends 'layout.html' %}
{% load i18n %}
{% load markdown %}
{% load humanize %}
{% load utilities %}

{% block title %}{{ author.name }}{% endblock %}

{% block content %}
<div class="block">
    <div class="columns is-mobile">
        <div class="column">
            <h1 class="title">{{ author.name }}</h1>
        </div>
        {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
        <div class="column is-narrow">
            <a href="{% url 'edit-author' author.id %}">
                <span class="icon icon-pencil" title="{% trans 'Edit Author' %}" aria-hidden="True"></span>
                <span class="is-hidden-mobile">{% trans "Edit Author" %}</span>
            </a>
        </div>
        {% endif %}
    </div>
</div>

<div class="block columns" itemscope itemtype="https://schema.org/Person">
    <meta itemprop="name" content="{{ author.name }}">

    {% firstof author.aliases author.born author.died as details %}
    {% firstof author.wikipedia_link author.openlibrary_key author.inventaire_id author.isni as links %}
    {% if details or links %}
    <div class="column is-3">
        {% if details %}
        <section class="block content">
            <h2 class="title is-4">{% trans "Author details" %}</h2>
            <dl class="box">
                {% if author.aliases %}
                <div class="is-flex is-flex-wrap-wrap mr-1">
                    <dt class="has-text-weight-bold mr-1">{% trans "Aliases:" %}</dt>
                    <dd>
                        {% include "snippets/trimmed_list.html" with items=author.aliases itemprop="alternateName" %}
                    </dd>
                </div>
                {% endif %}

                {% if author.born %}
                <div class="is-flex mt-1">
                    <dt class="has-text-weight-bold mr-1">{% trans "Born:" %}</dt>
                    <dd itemprop="birthDate">{{ author.born|naturalday }}</dd>
                </div>
                {% endif %}

                {% if author.died %}
                <div class="is-flex mt-1">
                    <dt class="has-text-weight-bold mr-1">{% trans "Died:" %}</dt>
                    <dd itemprop="deathDate">{{ author.died|naturalday }}</dd>
                </div>
                {% endif %}
            </dl>
        </section>
        {% endif %}

        {% if links %}
        <section>
            <h2 class="title is-4">{% trans "External links" %}</h2>
            <div class="box">
                {% if author.wikipedia_link %}
                <div>
                    <a itemprop="sameAs" href="{{ author.wikipedia_link }}" rel="noopener" target="_blank">
                        {% trans "Wikipedia" %}
                    </a>
                </div>
                {% endif %}

                {% if author.isni %}
                <div class="mt-1">
                    <a itemprop="sameAs" href="{{ author.isni_link }}" rel="noopener" target="_blank">
                        {% trans "View ISNI record" %}
                    </a>
                </div>
                {% endif %}

                {% trans "Load data" as button_text %}
                {% if author.openlibrary_key %}
                <div class="mt-1 is-flex">
                    <a class="mr-3" itemprop="sameAs" href="{{ author.openlibrary_link }}" target="_blank" rel="noopener">
                        {% trans "View on OpenLibrary" %}
                    </a>
                    {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
                    <button class="button is-small" type="button" data-modal-open="openlibrary_sync">
                        <span class="icon icon-download" title="{{ button_text }}"></span>
                        <span class="is-sr-only-mobile">{{ button_text }}</span>
                    </button>
                    {% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %}
                    {% endif %}
                </div>
                {% endif %}

                {% if author.inventaire_id %}
                <div class="mt-1 is-flex">
                    <a class="mr-3" itemprop="sameAs" href="{{ author.inventaire_link }}" target="_blank" rel="noopener">
                        {% trans "View on Inventaire" %}
                    </a>

                    {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
                    <button class="button is-small" type="button" data-modal-open="inventaire_sync">
                        <span class="icon icon-download" title="{{ button_text }}"></span>
                        <span class="is-sr-only-mobile">{{ button_text }}</span>
                    </button>
                    {% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %}
                    {% endif %}
                </div>
                {% endif %}

                {% if author.librarything_key %}
                <div class="mt-1">
                    <a itemprop="sameAs" href="https://www.librarything.com/author/{{ author.librarything_key }}" target="_blank" rel="noopener">
                        {% trans "View on LibraryThing" %}
                    </a>
                </div>
                {% endif %}

                {% if author.goodreads_key %}
                <div>
                    <a itemprop="sameAs" href="https://www.goodreads.com/author/show/{{ author.goodreads_key }}" target="_blank" rel="noopener">
                        {% trans "View on Goodreads" %}
                    </a>
                </div>
                {% endif %}
            </div>
        </section>
        {% endif %}
    </div>
    {% endif %}

    <div class="column">
        {% if author.bio %}
        {% include "snippets/trimmed_text.html" with full=author.bio trim_length=200 %}
        {% endif %}

        <h2 class="title is-4">{% blocktrans with name=author.name %}Books by {{ name }}{% endblocktrans %}</h2>
        <div class="columns is-multiline is-mobile">
        {% for book in books %}
            <div class="column is-one-fifth-tablet is-half-mobile is-flex is-flex-direction-column">
                <div class="is-flex-grow-1">
                    {% include 'landing/small-book.html' with book=book %}
                </div>
                {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
            </div>
        {% endfor %}
        </div>

        <div>
            {% include 'snippets/pagination.html' with page=books %}
        </div>
    </div>
</div>

{% endblock %}