{% 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 %}">

    {% if preview_images_enabled is True %}
    <meta name="twitter:card" content="summary_large_image">
    {% else %}
    <meta name="twitter:card" content="summary">
    {% endif %}
    <meta name="twitter:title" content="{% if title %}{{ title }} - {% endif %}{{ site.name }}">
    <meta name="og:title" content="{% if title %}{{ title }} - {% endif %}{{ site.name }}">
    <meta name="twitter:description" content="{{ site.instance_tagline }}">
    <meta name="og:description" content="{{ site.instance_tagline }}">

    {% block opengraph_images %}
        {% include 'snippets/opengraph_images.html' %}
    {% endblock %}
    <meta name="twitter:image:alt" content="BookWyrm Logo">

    {% block head_links %}{% endblock %}
</head>
<body>
{% block body %}
<nav class="navbar" aria-label="main navigation">
    <div class="container">
        <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 %}">
            </a>
            <form class="navbar-item column is-align-items-start pt-5" action="{% url 'search' %}">
                <div class="field has-addons">
                    <div class="control">
                        {% if user.is_authenticated %}
                            {% trans "Search for a book, user, or list" as search_placeholder %}
                        {% else %}
                            {% trans "Search for a book" as search_placeholder %}
                        {% endif %}
                        <input aria-label="{{ search_placeholder }}" id="search_input" class="input" type="text" name="q" placeholder="{{ search_placeholder }}" value="{{ query }}">
                    </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' %}">
                                <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" data-controls="main_nav" aria-expanded="false">
                <i class="icon icon-dots-three-vertical" aria-hidden="true"></i>
                <span class="is-sr-only">{% trans "Main navigation menu" %}</span>
            </button>
        </div>

        <div class="navbar-menu" id="main_nav">
            <div class="navbar-start">
                {% if request.user.is_authenticated %}
                <a href="/#feed" class="navbar-item mt-3 py-0">
                    {% trans "Feed" %}
                </a>
                <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>
                {% 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">
                        <span class="tag is-medium">
                            <span class="icon icon-bell" title="{% trans 'Notifications' %}">
                                <span class="is-sr-only">{% trans "Notifications" %}</span>
                            </span>
                        </span>
                        {% with request.user.unread_notification_count as notification_count %}
                        <span
                            class="{% if not notification_count %}is-hidden {% elif request.user.has_unread_mentions %}is-danger {% endif %}tag is-medium transition-x"
                            data-poll-wrapper
                        >
                            <span data-poll="notifications">{{ notification_count }}</span>
                        </span>
                        {% endwith %}
                    </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>
                                        <input type="password" name="password" maxlength="128" class="input" required="" id="id_password" placeholder="{% trans 'password' %}">
                                        <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>
    </div>
</nav>

{% if request.user.is_authenticated and active_announcements.exists %}
<div class="block 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">
        {# almost every view needs to know the user shelves #}
        {% with request.user.shelf_set.all as user_shelves %}
        {% block content %}
        {% endblock %}
        {% endwith %}
    </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>

<footer class="footer">
    <div class="container">
        <div class="columns">
            <div class="column is-one-fifth">
                <p>
                <a href="{% url 'about' %}">{% blocktrans with site_name=site.name %}About {{ site_name }}{% endblocktrans %}</a>
                </p>
                {% if site.admin_email %}
                <p>
                    <a href="mailto:{{ site.admin_email }}">{% trans "Contact site admin" %}</a>
                </p>
                {% endif %}
                <p>
                    <a href="https://docs.joinbookwyrm.com/">{% trans "Documentation" %}</a>
                </p>
            </div>
            <div class="column content is-two-fifth">
                {% if site.support_link %}
                <p>
                    <span class="icon icon-heart"></span>
                    {% blocktrans with site_name=site.name support_link=site.support_link support_title=site.support_title %}Support {{ site_name }} on <a href="{{ support_link }}" target="_blank">{{ support_title }}</a>{% endblocktrans %}
                </p>
                {% endif %}
                <p>
                {% blocktrans %}BookWyrm's source code is freely available. You can contribute or report issues on <a href="https://github.com/mouse-reeve/bookwyrm">GitHub</a>.{% endblocktrans %}
                </p>
            </div>
            {% if site.footer_item %}
            <div class="column">
                <p>{{ site.footer_item|safe }}</p>
            </div>
            {% endif %}
        </div>
    </div>
</footer>
{% endblock %}

<script>
    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>

{% block scripts %}{% endblock %}

</body>
</html>
