{% extends 'user/user_layout.html' %}
{% load bookwyrm_tags %}

{% block header %}
<header class="columns">
    <h1 class="title">
        {% if is_self %}Your
        {% else %}
        {% include 'snippets/username.html' with user=user possessive=True %}
        {% endif %}
        shelves
    </h1>
</header>
{% endblock %}

{% block panel %}
<div class="block columns">
    <div class="column">
        <div class="tabs" role="tablist">
            <ul>
                {% for shelf_tab in shelves %}
                <li class="{% if shelf_tab.identifier == shelf.identifier %}is-active{% endif %}">
                    <a href="/user/{{ user | username }}/shelf/{{ shelf_tab.identifier }}" role="tab" aria-selected="{% if shelf_tab.identifier == shelf.identifier %}true{% else %}false{% endif %}">{{ shelf_tab.name }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    {% if is_self %}
    <div class="column is-narrow">
        {% include 'snippets/toggle/open_button.html' with text="Create shelf" icon="plus" controls_text="create-shelf-form" focus="create-shelf-form-header" %}
    </div>
    {% endif %}
</div>

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

<div class="block columns is-mobile">
    <div class="column">
        <h2 class="title is-3">
            {{ shelf.name }}
            <span class="subtitle">
                {% include 'snippets/privacy-icons.html' with item=shelf %}
            </span>
        </h2>
    </div>
    {% if is_self %}
    <div class="column is-narrow">
        {% include 'snippets/toggle/open_button.html' with text="Edit shelf" icon="pencil" controls_text="edit-shelf-form" focus="edit-shelf-form-header" %}
    </div>
    {% endif %}
</div>

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

<div class="block">
    <div>
        {% include 'snippets/shelf.html' with shelf=shelf books=books ratings=ratings %}
    </div>
</div>
{% endblock %}