{% load static %}
{% load i18n %}
<div class="left-sidebar{% if user.is_authenticated %} left-sidebar-authenticated{% endif %}">
    {% if not user.is_authenticated %}
        {% for message in messages %}
            {% if 'LoginError' in message.tags %}
                <div id="login-error">
                    <div class="messageBox">{{ message.message }}</div>
                </div>
            {% endif %}
        {% endfor %}
        <div id="login-area">
            <form method="post" action="{% url 'auth:login' %}" id="login-form">
                {% csrf_token %}
                <input type="text"
                       id="username"
                       name="username"
                       placeholder="{% translate "Username" %}"
                       autocomplete="off"
                       value="{{ request.GET.username }}" />
                <input type="password"
                       id="password"
                       name="password"
                       placeholder="{% translate "Password" %}"
                       autocomplete="off" />
                <input type="hidden"
                       name="next"
                       value="{% if request.GET.next %} {{ request.GET.next }} {% else %} {{ request.path }} {% endif %}" />
                <input type="submit" value="" />
            </form>
            <button id="register-now-button"></button>
            <button id="forgot-password-button"></button>
        </div>
    {% else %}
        <div id="user-area">
            <h2 class="user-title">
                {% blocktranslate with username=user.username %}Hello, {{ username }}{% endblocktranslate %}
            </h2>
            <div class="user-items-container">
                <div class="user-item">
                    <img src="{% static 'images/core/icons/journals.png' %}" width="20" height="20"
                         alt="Journals Icon" />
                    <a href="{% url "services:journals:journals" %}">{% translate "Journals" %}</a>
                </div>
                <div class="user-item">
                    <img src="{% static 'images/core/icons/mypage.png' %}" width="20" height="20" alt="My Page Icon" />
                    <a href="#mypage">{% translate "My Page" %}</a>
                </div>
                <div class="user-item">
                    <img src="{% static 'images/core/icons/messages.png' %}" width="20" height="20"
                    alt="Letters Icon" />
                    <a href="{% url 'core:letters:inbox' %}">{% translate "Letters" %}{% if unread_letter_count %} (<strong>{{ unread_letter_count }}</strong>){% endif %}</a>
                </div>
                <div class="user-item">
                    <img src="{% static 'images/core/icons/preferences.png' %}" width="20" height="20"
                        alt="Site Preferences Icon" />
                    <a href="#preferences">{% translate "Site Preferences" %}</a>
                </div>
                <div class="user-item">
                    <img src="{% static 'images/core/icons/logout.png' %}" width="20" height="20" alt="Logout Icon" />
                    <a href="{% url 'auth:logout' %}">{% translate "Logout" %}</a>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="navigation-links" {% if user.is_authenticated %}style="margin-top: 42px"{% endif %}>
        <div class="navigation-title-container">
            <h1 class="navigation-title">{% translate "Navigation" %}</h1>
        </div>
        <div class="navigation-items-container">
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/home.png' %}" width="20" height="20" alt="Home Icon" />
                <a href="{% url 'core:home' %}">{% translate "Home" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/journalofrandomthoughts.png' %}" width="20" height="20"
                     alt="Journal of Random Thoughts Icon" />
                <a href="{% url 'core:journal_default' %}">{% translate "Journal of Random Thoughts" %}</a>
            </div>
            <div class="navigation-item weblog-sidebar-container">
                <img src="{% static 'images/core/icons/weblog.gif' %}" width="20" height="20" alt="Weblog Icon" />
                <a href="{% url 'weblog:home' %}">{% translate "Weblog" %}</a>
                <div class="weblog-sidebar-hovered">
                    <div class="hovercard-item">
                        <img src="{% static 'images/core/icons/weblog_internal.png' %}" width="20" height="20"
                             alt="Weblog Internal Icon" />
                        <a href="{% url 'weblog:home' %}">{% translate "Weblog" %}</a>
                    </div>
                    <div class="hovercard-item">
                        <img src="{% static 'images/core/icons/categories.gif' %}" width="20" height="20"
                             alt="Categories Icon" />
                        <a href="{% url 'weblog:categories' %}">{% translate "Categories" %}</a>
                    </div>
                    <div class="hovercard-item">
                        <img src="{% static 'images/core/icons/tags.gif' %}" width="20" height="20"
                             alt="Tags Icon" />
                        <a href="{% url 'weblog:tags' %}">{% translate "Tags" %}</a>
                    </div>
                    <div class="hovercard-item">
                        <img src="{% static 'images/core/icons/archives.gif' %}" width="20" height="20"
                             alt="Archives Icon" />
                        <a href="{% url 'weblog:archives' %}">{% translate "Archives" %}</a>
                    </div>
                </div>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/shrines.png' %}" width="20" height="20" alt="Shrines Icon" />
                <a href="#shrines">{% translate "Shrines" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/screenshots.png' %}" width="20" height="20"
                     alt="Screenshots Icon" />
                <a href="{% url 'core:screenshots' %}">{% translate "Screenshots" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/chatrooms.png' %}" width="20" height="20"
                     alt="Chatrooms Icon" />
                <a href="#chatrooms">{% translate "Chatrooms" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/guestbook.png' %}" width="20" height="20"
                     alt="Guestbook Icon" />
                <a href="#guestbook">{% translate "Guestbook" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/pagodarealm.png' %}" width="20" height="20"
                        alt="The Pagoda Realm Icon" />
                <a href="">{% translate "The Pagoda Realm" %}</a>
            </div>
            <div class="navigation-item">
                {% if not user.is_authenticated %}
                    <img src="{% static 'images/core/icons/registeraccount.png' %}" width="20" height="20"
                         alt="Register Account Icon" />
                    <a href="#register">{% translate "Register Account" %}</a>
                {% else %}
                    <img src="{% static 'images/core/icons/useraccount.png' %}" width="20" height="20"
                         alt="My Account Icon" />
                    <a href="#account">{% translate "My Account" %}</a>
                {% endif %}
            </div>
            <div class="navigation-item {{ request.LANGUAGE_CODE }}">
                <img src="{% static 'images/core/icons/changelanguage.png' %}" width="20" height="20"
                     alt="Change Language Icon" />
                <button class="link-button"
                   onclick="changeLanguage('{{ request.ALT_LANGUAGE }}')">
                    {% if request.LANGUAGE_CODE == 'ja' %}
                        English (英語)
                    {% else %}
                        日本語 (Japanese)
                    {% endif %}
                </button>
            </div>
        </div>
    </div>
    <div id="search-area">
        <form action="#" method="get" id="search-form">
            <input type="text"
                   name="q"
                   placeholder="{% translate "Search" %}"
                   autocomplete="off"
                   value="{{ request.GET.q }}"
                   required />
        </form>
    </div>
    <div class="navigation-links">
        <div class="navigation-title-container">
            <h1 id="thegoodstuff" class="navigation-title">{% translate "The Good Stuff" %}</h1>
        </div>
        <div class="navigation-items-container">
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/discover.png' %}" width="20" height="20" alt="Discover Icon" />
                <a href="#discover">{% translate "Discover" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/calendar.png' %}" width="20" height="20"
                     alt="Calendar Icon" />
                <a href="#calendar">{% translate "Post Calendar" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/anime.png' %}" width="20" height="20" alt="Anime Icon" />
                <a href="#anime">{% translate "Anime Streams" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/matrix.png' %}" width="20" height="20"
                     alt="The Matrix Icon" />
                <a href="#matrix">{% translate "The Matrix" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/marketplace.png' %}" width="20" height="20"
                     alt="Marketplace Icon" />
                <a href="#marketplace">{% translate "Marketplace" %}</a>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/discussions.png' %}" width="20" height="20"
                     alt="Discussions Icon" />
                <a href="#discussions">{% translate "Discussions" %}</a>
            </div>
        </div>
    </div>
    <div class="pamphlet pamphlet-big"></div>
    <div class="navigation-links">
        <div class="navigation-title-container">
            <h1 class="navigation-title">{% translate "Site Spells" %}</h1>
        </div>
        <div class="navigation-items-container">
            <div class="navigation-item">
                {% if request.COOKIES.summonOneko == 'true' %}
                    <img src="{% static 'images/core/icons/withdraw_oneko.gif' %}" width="20" height="20"
                         alt="Withdraw Oneko Icon" />
                    <button class="link-button"
                         onclick="document.cookie = 'summonOneko=false;path=/';location.reload();">{% translate "Withdraw Oneko" %}</button>
                {% else %}
                    <img src="{% static 'images/core/icons/summon_oneko.gif' %}" width="20" height="20"
                         alt="Summon Oneko Icon" />
                    <button class="link-button"
                         onclick="document.cookie = 'summonOneko=false;path=/';location.reload();">{% translate "Withdraw Oneko" %}</button>
                {% endif %}
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/harlemshake.gif' %}" width="20" height="20"
                     alt="Harlem Shake Icon" />
                <button class="link-button" onclick="javascript:harlemShakeAndBake();">{% translate "Harlem Shake" %}</button>
            </div>
            <div class="navigation-item">
                <img src="{% static 'images/core/icons/dvd.png' %}" width="20" height="20"
                     alt="DVD Sitesaver Icon" />
                <button class="link-button" onclick="javascript:dvdSitesaver();">{% translate "DVD Sitesaver" %}</button>
            </div>
        </div>
    </div>
    {% if user.is_staff or user.is_superuser %}
        <div class="navigation-links">
            <div class="navigation-title-container">
                <h1 class="navigation-title">{% translate "Admin Area" %}</h1>
            </div>
            <div class="navigation-items-container">
                <div class="navigation-item">
                    <img src="{% static 'images/core/gifs/right_hand.gif' %}" width="20" height="20"
                         alt="Announcements Manager Icon" />
                    <a href="{% url "administration:announcements" %}">{% translate "Announcement Manager" %}</a>
                </div>
                <div class="navigation-item">
                    <img src="{% static 'images/core/gifs/right_hand.gif' %}" width="20" height="20"
                         alt="Emoji Manager Icon" />
                    <a href="{% url 'administration:emojis' %}">{% translate "Emoji Manager" %}</a>
                </div>
                <div class="navigation-item">
                    <img src="{% static 'images/core/gifs/right_hand.gif' %}" width="20" height="20"
                         alt="KawaiiBeats Manager Icon" />
                    <a href="{% url 'administration:kawaiibeats' %}">{% translate "KawaiiBeats Manager" %}</a>
                </div>
                <div class="navigation-item">
                    <img src="{% static 'images/core/gifs/right_hand.gif' %}" width="20" height="20"
                         alt="Users Manager Icon" />
                    <a href="#manage-users">{% translate "User Manager" %}</a>
                </div>
                <div class="navigation-item">
                    <img src="{% static 'images/core/gifs/right_hand.gif' %}" width="20" height="20"
                         alt="Site Administration Icon" />
                    <a href="{% url 'admin:index' %}">{% translate "Site Administration" %}</a>
                </div>
            </div>
        </div>
    {% endif %}
    <p class="sidebar-credits">{% translate "This website uses cookies and there's nothing you can do about it!" %}</p>
</div>
{% block scripts %}
    <script type="text/javascript">
    function changeLanguage(language) {
      document.cookie = `site_language=${language};path=/`
      location.reload()
    }
    </script>
{% endblock scripts %}