{% load layout %}{% load i18n %}
<!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 rel="stylesheet" href="/static/css/vendor/bulma.min.css">
    <link rel="stylesheet" href="/static/css/vendor/icons.css">
    <link rel="stylesheet" href="/static/css/bookwyrm.css">

    <link rel="shortcut icon" type="image/x-icon" href="{% if site.favicon %}/images/{{ site.favicon }}{% else %}/static/images/favicon.ico{% endif %}">

    <meta name="twitter:card" content="summary">
    <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 }}">

    <meta name="twitter:image" content="{% if site.logo %}/images/{{ site.logo }}{% else %}/static/images/logo.png{% endif %}">
    <meta name="og:image" content="{% if site.logo %}/images/{{ site.logo }}{% else %}/static/images/logo.png{% endif %}">
    <meta name="twitter:image:alt" content="BookWyrm Logo">
</head>
<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 %}/images/{{ site.logo_small }}{% else %}/static/images/logo-small.png{% endif %}" alt="Home page">
            </a>
            <form class="navbar-item column" action="/search/">
                <div class="field has-addons">
                    <div class="control">
                        <input aria-label="{% trans 'Search for a book or user' %}" id="search-input" class="input" type="text" name="q" placeholder="{% trans 'Search for a book or user' %}" 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>
            </form>

            <div role="button" tabindex="0" class="navbar-burger pulldown-menu" data-controls="main-nav" aria-expanded="false">
                <div class="navbar-item mt-3">
                    <div class="icon icon-dots-three-vertical" title="{% trans 'Main navigation menu' %}">
                        <span class="is-sr-only">{% trans "Main navigation menu" %}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="navbar-menu" id="main-nav">
            <div class="navbar-start">
                {% if request.user.is_authenticated %}
                <a href="{% url 'user-shelves' request.user.localname %}" class="navbar-item">
                    {% trans "Your books" %}
                </a>
                <a href="/#feed" class="navbar-item">
                    {% trans "Feed" %}
                </a>
                <a href="{% url 'lists' %}" class="navbar-item">
                    {% trans "Lists" %}
                </a>
                {% endif %}
            </div>

            <div class="navbar-end">
            {% if request.user.is_authenticated %}
                <div class="navbar-item has-dropdown is-hoverable">
                    <a
                        href="{{ request.user.local_path }}"
                        class="navbar-link pulldown-menu"
                        role="button"
                        aria-expanded="false"
                        tabindex="0"
                        aria-haspopup="true"
                        aria-controls="navbar-dropdown"
                    >
                        {% include 'snippets/avatar.html' with user=request.user %}
                        <span class="ml-2">{{ request.user.display_name }}</span>
                    </a>
                    <ul class="navbar-dropdown" id="navbar-dropdown">
                        <li>
                            <a href="{% url 'direct-messages' %}" class="navbar-item">
                                {% trans "Direct Messages" %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'directory' %}" class="navbar-item">
                                {% trans 'Directory' %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'import' %}" class="navbar-item">
                                {% trans 'Import Books' %}
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'prefs-profile' %}" class="navbar-item">
                                {% trans 'Settings' %}
                            </a>
                        </li>
                        {% if perms.bookwyrm.create_invites or perms.moderate_users %}
                        <li class="navbar-divider" role="presentation"></li>
                        {% endif %}
                        {% if perms.bookwyrm.create_invites %}
                        <li>
                            <a href="{% url 'settings-invite-requests' %}" class="navbar-item">
                                {% trans 'Invites' %}
                            </a>
                        </li>
                        {% endif %}
                        {% if perms.bookwyrm.moderate_users %}
                        <li>
                            <a href="{% url 'settings-users' %}" class="navbar-item">
                                {% trans 'Admin' %}
                            </a>
                        </li>
                        {% endif %}
                        <li class="navbar-divider" role="presentation"></li>
                        <li>
                            <a href="{% url 'logout' %}" class="navbar-item">
                                {% trans 'Log out' %}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="navbar-item">
                    <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>
                        <span
                            class="{% if not request.user.unread_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">{{ request.user.unread_notification_count }}</span>
                        </span>
                    </a>
                </div>
                {% else %}
                <div class="navbar-item">
                    {% if request.path != '/login' and request.path != '/login/' %}
                    <div class="columns">
                        <div class="column">
                            <form name="login" method="post" action="/login">
                                {% 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 "Username:" %}</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 %}

<div 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>
</div>

<footer class="footer">
    <div class="container">
        <div class="columns">
            <div class="column is-one-fifth">
                <p>
                <a href="{% url 'about' %}">{% trans "About this server" %}</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>

<script>
    var csrf_token = '{{ csrf_token }}';
</script>
<script src="/static/js/bookwyrm.js"></script>
<script src="/static/js/localstorage.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>