{% load layout %}
{% load sass_tags %}
{% load i18n %}
{% load static %}

<!DOCTYPE html>
<html lang="{% get_lang %}">
<head>
    <title>{% block title %}BookWyrm{% endblock %} - {{ site.name }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{% sass_src site_theme %}" rel="stylesheet" type="text/css" />

    <link rel="search" type="application/opensearchdescription+xml" href="{% url 'opensearch' %}" title="{% blocktrans with site_name=site.name %}{{ site_name }} search{% endblocktrans %}" />

    <link rel="shortcut icon" type="image/x-icon" href="{% if site.favicon %}{% get_media_prefix %}{{ site.favicon }}{% else %}{% static "images/favicon.ico" %}{% endif %}">
    <link rel="apple-touch-icon" href="{% if site.logo %}{{ media_full_url }}{{ site.logo }}{% else %}{% static "images/logo.png" %}{% endif %}">
    <link rel="manifest" href="/manifest.json" />

    {% block opengraph %}
        {% include 'snippets/opengraph.html' %}
    {% endblock %}

    {% block head_links %}{% endblock %}
</head>
<body>
{% block body %}
<nav class="navbar" aria-label="main navigation">
    <div class="container">
        {% with notification_count=request.user.unread_notification_count has_unread_mentions=request.user.has_unread_mentions %}
        {% if not request.user.moved_to %}
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                <img class="image logo" src="{% if site.logo_small %}{% get_media_prefix %}{{ site.logo_small }}{% else %}{% static "images/logo-small.png" %}{% endif %}" alt="{% blocktrans with site_name=site.name %}{{ site_name }} home page{% endblocktrans %}" loading="lazy" decoding="async">
            </a>
            <form class="navbar-item column is-align-items-start pt-5" action="{% url 'search' %}">
                <div class="field has-addons">
                    <div class="control">
                        {% if request.user.is_authenticated %}
                            {% trans "Search for a book, author, user, or list" as search_placeholder %}
                        {% else %}
                            {% trans "Search for a book" as search_placeholder %}
                        {% endif %}
                        <input aria-label="{{ search_placeholder }}" id="tour-search" class="input" type="text" name="q" placeholder="{{ search_placeholder }}" value="{{ query }}" spellcheck="false">
                    </div>
                    <div class="control">
                        <button class="button" type="submit">
                            <span class="icon icon-search" title="{% trans 'Search' %}">
                                <span class="is-sr-only">{% trans "Search" %}</span>
                            </span>
                        </button>
                    </div>
                    <div class="control">
                        <button class="button" type="button" data-modal-open="barcode-scanner-modal">
                            <span class="icon icon-barcode" title="{% trans 'Scan Barcode' %}" id="tour-barcode">
                                <span class="is-sr-only">{% trans "Scan Barcode" %}</span>
                            </span>
                        </button>
                    </div>
                </div>
            </form>
            {% include "search/barcode_modal.html" with id="barcode-scanner-modal" %}

            <button
                type="button"
                tabindex="0"
                class="navbar-burger pulldown-menu my-4 is-flex-touch is-align-items-center is-justify-content-center"
                data-controls="main_nav"
                aria-expanded="false"
                aria-label="{% trans 'Main navigation menu' %}"
            >
                <i class="icon-dots-three-vertical" aria-hidden="true"></i>

                <strong
                    class="{% if not notification_count %}is-hidden {% elif has_unread_mentions %}is-danger {% else %}is-primary {% endif %} tag is-small px-1"
                    data-poll-wrapper
                >
                    <span class="is-sr-only">{% trans "Notifications" %}</span>
                    <strong data-poll="notifications" class="has-text-white">
                        {{ notification_count }}
                    </strong>
                </strong>
            </button>
        </div>
        <div class="navbar-menu" id="main_nav">
            <div class="navbar-start" id="tour-navbar-start">
                {% if request.user.is_authenticated %}
                <a href="{% url 'lists' %}" class="navbar-item mt-3 py-0">
                    {% trans "Lists" %}
                </a>
                <a href="{% url 'discover' %}" class="navbar-item mt-3 py-0">
                    {% trans "Discover" %}
                </a>
                <a href="{% url 'user-shelves' request.user.localname %}" class="navbar-item mt-3 py-0">
                    {% trans "Your Books" %}
                </a>
                {% endif %}
            </div>

            <div class="navbar-end">
            {% if request.user.is_authenticated %}
                <div class="navbar-item mt-3 py-0">
                    {% include 'user_menu.html' %}
                </div>
                <div class="navbar-item mt-3 py-0">
                    <a href="{% url 'notifications' %}" class="tags has-addons" id="tour-notifications">
                        <span class="tag is-medium">
                            <span class="icon icon-bell" title="{% trans 'Notifications' %}">
                                <span class="is-sr-only">{% trans "Notifications" %}</span>
                            </span>
                        </span>
                        <span
                            class="{% if not notification_count %}is-hidden {% elif has_unread_mentions %}is-danger {% endif %}tag is-medium transition-x"
                            data-poll-wrapper
                        >
                            <span data-poll="notifications">{{ notification_count }}</span>
                        </span>
                    </a>
                </div>
                {% else %}
                <div class="navbar-item pt-5 pb-0">
                    {% if request.path != '/login' and request.path != '/login/' %}
                    <div class="columns">
                        <div class="column">
                            <form name="login" method="post" action="{% url 'login' %}?next={{ request.path }}">
                                {% csrf_token %}
                                <div class="columns is-variable is-1">
                                    <div class="column">
                                        <label class="is-sr-only" for="id_localname">{% trans "Username:" %}</label>
                                        <input type="text" name="localname" maxlength="150" class="input" required="" id="id_localname" placeholder="{% trans 'username' %}">
                                    </div>
                                    <div class="column">
                                        <label class="is-sr-only" for="id_password">{% trans "Password:" %}</label>
                                        <div class="control has-icons-right">
                                            <input type="password" name="password" maxlength="128" class="input" required="" id="id_password" placeholder="{% trans 'password' %}">
                                            <span data-password-icon data-for="id_password" class="icon is-right is-clickable">
                                                <button type="button" aria-controls="id_password" class="icon-eye-blocked" title="{% trans 'Show/Hide password' %}"></button>
                                            </span>
                                        </div>
                                        <p class="help"><a href="{% url 'password-reset' %}">{% trans "Forgot your password?" %}</a></p>
                                    </div>
                                    <div class="column is-narrow">
                                        <button class="button is-primary" type="submit">{% trans "Log in" %}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        {% if site.allow_registration and request.path != '' and request.path != '/' %}
                        <div class="column is-narrow">
                            <a href="/" class="button is-link">
                                {% trans "Join" %}
                            </a>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                <img class="image logo" src="{% if site.logo_small %}{% get_media_prefix %}{{ site.logo_small }}{% else %}{% static "images/logo-small.png" %}{% endif %}" alt="{% blocktrans with site_name=site.name %}{{ site_name }} home page{% endblocktrans %}" loading="lazy" decoding="async">
            </a>
        </div>
        {% endif %}
        {% endwith %}
    </div>
</nav>

{% if request.user.is_authenticated and active_announcements.exists %}
<div class="is-flex-grow-1">
    <div class="container">
        {% for announcement in active_announcements %}
        {% include 'snippets/announcement.html' with announcement=announcement %}
        {% endfor %}
    </div>
</div>
{% endif %}

<main class="section is-flex-grow-1">
    <div class="container">
        {% if request.user.moved_to %}
            {% include "moved.html" %}
        {% else %}
            {# almost every view needs to know the user shelves #}
            {% with request.user.shelf_set.all as user_shelves %}
            {% block content %}
            {% endblock %}
            {% endwith %}
        {% endif %}
    </div>
</main>

<div role="region" aria-live="polite" id="live-messages">
    <p id="status-success-message" class="live-message is-sr-only is-hidden">{% trans "Successfully posted status" %}</p>
    <p id="status-error-message" class="live-message notification is-danger p-3 pr-5 pl-5 is-hidden">{% trans "Error posting status" %}</p>
</div>

{% include 'snippets/footer.html' %}
{% endblock %}

<script nonce="{{request.csp_nonce}}">
    var csrf_token = '{{ csrf_token }}';
</script>

<script src="{% static "js/bookwyrm.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/localstorage.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/status_cache.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/vendor/quagga.min.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/vendor/shepherd.min.js" %}?v={{ js_cache }}"></script>
<script src="{% static "js/guided_tour.js" %}?v={{ js_cache }}"></script>

{% block scripts %}{% endblock %}

</body>
</html>
