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

{% block title %}
{% include 'user/books_header.html' with shelf=shelf %}
{% endblock %}

{% block opengraph_images %}
    {% include 'snippets/opengraph_images.html' with image=user.preview_image %}
{% endblock %}

{% block content %}
<header class="block">
    <h1 class="title">
        {% include 'user/books_header.html' %}
    </h1>
</header>

<nav class="breadcrumb subtitle" aria-label="breadcrumbs">
    <ul>
        <li><a href="{% url 'user-feed' user|username %}">{% trans "User profile" %}</a></li>
        <li class="is-active">
            <a href="#" aria-current="page">
                {% include "snippets/translated_shelf_name.html" with shelf=shelf %}
            </a>
        </li>
    </ul>
</nav>

<nav class="block columns is-mobile scroll-x">
    <div class="column pr-0">
        <div class="tabs">
            <ul>
                <li class="{% if shelf.identifier == 'all' %}is-active{% endif %}">
                    <a href="{% url 'user-shelves' user|username %}"{% if shelf.identifier == 'all' %} aria-current="page"{% endif %}>
                        {% trans "All books" %}
                    </a>
                </li>
                {% for shelf_tab in shelves %}
                <li class="{% if shelf_tab.identifier == shelf.identifier %}is-active{% endif %}">
                    <a
                        href="{{ shelf_tab.local_path }}"
                        {% if shelf_tab.identifier == shelf.identifier %} aria-current="page"{% endif %}
                    >
                        {% include "snippets/translated_shelf_name.html" with shelf=shelf_tab %}
                    </a>
                </li>
                {% endfor %}

            </ul>
        </div>
    </div>

    {% if is_self %}
    <div class="column is-narrow pl-0">
        <div class="tabs">
            <ul>
                <li>
                    <a href="{% url 'import' %}">
                        <span class="icon icon-list" aria-hidden="true"></span>
                        <span>{% trans "Import Books" %}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="column is-narrow">
        {% trans "Create shelf" as button_text %}
        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" controls_text="create_shelf_form" focus="create_shelf_form_header" %}
    </div>
    {% endif %}
</nav>

<div class="block">
    {% include 'shelf/create_shelf_form.html' with controls_text='create_shelf_form' %}
</div>

<div>
    <div class="block columns is-mobile">
        <div class="column">
            <h2 class="title is-3">
                {% if shelf.identifier == 'to-read' %}{% trans "To Read" %}
                {% elif shelf.identifier == 'reading' %}{% trans "Currently Reading" %}
                {% elif shelf.identifier == 'read' %}{% trans "Read" %}
                {% else %}{{ shelf.name }}{% endif %}
                <span class="subtitle">
                    {% include 'snippets/privacy-icons.html' with item=shelf %}
                </span>
                {% with count=books.paginator.count %}
                {% if count %}
                <span class="help">
                    {% blocktrans trimmed count counter=count with formatted_count=count|intcomma %}
                        {{ formatted_count }} book
                    {% plural %}
                        {{ formatted_count }} books
                    {% endblocktrans %}

                    {% if books.has_other_pages %}
                        {% blocktrans trimmed with start=books.start_index end=books.end_index %}
                        (showing {{ start }}-{{ end }})
                        {% endblocktrans %}
                    {% endif %}
                </span>
                {% endif %}
                {% endwith %}
            </h2>
        </div>
        {% if is_self and shelf.id %}
        <div class="column is-narrow">
            <div class="is-flex">
                {% trans "Edit shelf" as button_text %}
                {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="pencil" controls_text="edit_shelf_form" focus="edit_shelf_form_header" %}

                {% if shelf.deletable %}
                <form class="ml-1" name="delete-shelf" action="/delete-shelf/{{ shelf.id }}" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="user" value="{{ request.user.id }}">
                    <button class="button is-danger is-light" type="submit">
                        {% trans "Delete shelf" %}
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
    {% if shelf.description %}
    <p>{{ shelf.description }}</p>
    {% endif %}
</div>

<div class="block">
    {% include 'shelf/edit_shelf_form.html' with controls_text="edit_shelf_form" %}
</div>

<div class="block">
    <div>
        {% if books|length > 0 %}
        <table class="table is-striped is-fullwidth is-mobile">
            <thead>
                <tr>
                    <th>{% trans "Cover"%}</th>
                    <th>{% trans "Title"  as text %}{% include 'snippets/table-sort-header.html' with field="title" sort=sort text=text %}</th>
                    <th>{% trans "Author"  as text %}{% include 'snippets/table-sort-header.html' with field="author" sort=sort text=text %}</th>
                    {% if request.user.is_authenticated %}
                        {% if is_self %}
                    <th>{% trans "Shelved"  as text %}{% include 'snippets/table-sort-header.html' with field="shelved_date" sort=sort text=text %}</th>
                    <th>{% trans "Started"  as text %}{% include 'snippets/table-sort-header.html' with field="start_date" sort=sort text=text %}</th>
                    <th>{% trans "Finished"  as text %}{% include 'snippets/table-sort-header.html' with field="finish_date" sort=sort text=text %}</th>
                        {% endif %}
                    <th>{% trans "Rating" as text %}{% include 'snippets/table-sort-header.html' with field="rating" sort=sort text=text %}</th>
                    {% endif %}
                    {% if shelf.user == request.user %}
                    <th aria-hidden="true"></th>
                    {% endif %}
                </tr>
            </thead>
            <tbody>
                {% for book in books %}
                {% spaceless %}
                <tr class="book-preview">
                    <td class="book-preview-top-row">
                        <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-tablet is-h-s' size='small' %}</a>
                    </td>
                    <td data-title="{% trans "Title" %}">
                        <a href="{{ book.local_path }}">{{ book.title }}</a>
                    </td>
                    <td data-title="{% trans "Author" %}">
                        {% include 'snippets/authors.html' %}
                    </td>
                    {% if request.user.is_authenticated %}
                        {% if is_self %}
                    <td data-title="{% trans "Shelved" %}">
                        {{ book.shelved_date|naturalday }}
                    </td>
                    <td data-title="{% trans "Started" %}">
                        {{ book.start_date|naturalday|default_if_none:""}}
                    </td>
                    <td data-title="{% trans "Finished" %}">
                        {{ book.finish_date|naturalday|default_if_none:""}}
                    </td>
                        {% endif %}
                    <td data-title="{% trans "Rating" %}">
                        {% include 'snippets/stars.html' with rating=book.rating %}
                    </td>
                    {% endif %}
                    {% if shelf.user == request.user %}
                    <td class="book-preview-top-row has-text-right">
                        {% with right=True %}
                        {% if not shelf.id %}
                        {% active_shelf book as current %}
                        {% include 'snippets/shelf_selector.html' with current=current.shelf class="is-small" %}
                        {% else %}
                        {% include 'snippets/shelf_selector.html' with current=shelf class="is-small" %}
                        {% endif %}
                        {% endwith %}
                    </td>
                    {% endif %}
                </tr>
                {% endspaceless %}
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p><em>{% trans "This shelf is empty." %}</em></p>
        {% endif %}

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