{% load static %}
{% comment %} Login Area {% endcomment %}
{% if not user.is_authenticated %}
<link rel="stylesheet" href="{% static 'css/login-area.css' %}">
{% for message in messages %}
{% if 'loginError' in message.tags %}
        {% if message.message == "ENVERR" and request.GET.username %}
            {% comment %} <form method="post" action="{% url 'users:sendverificationemail' %}" style="position: relative;"> {% endcomment %}
                {% csrf_token %}
                <input type="hidden" name="username" value="{{ request.GET.username }}">
                <input type="submit" value="" style="    display: block;
                width: 57px;
                height: 12px;
                cursor: pointer;
                border-radius: 2px;
                position: absolute;
                top: 9px;
                left: -87px;
                background: transparent;
                z-index: 3;">
            </form>
        {% endif %}
        <div id="login-error">
            <div class="messageBox {{message.message}}"></div>
        </div>
        {% endif %}
    {% endfor %}
<div id="login-area">
    {% comment %} <form method="post" action="{% url 'users:login' %}" id="login-form"> {% endcomment %}
        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
        <input type="text" id="username" name="username" placeholder="Username" autocomplete="off" value="{{ request.GET.username }}">
        <input type="password" id="password" name="password" placeholder="Password" autocomplete="off">
        <input type="hidden" name="next" value="{{ request.path }}">
        <input type="submit" value="">
    </form>
    <a href="#" id="register-now-button"></a>
    <a href="#" id="forgot-password-button"></a>
</div>
{% endif %}

{% if user.is_authenticated %}
<div id="user-area" style="position: relative">
    <h2>Hello, {{ user.username }}!</h2>
    <ul>
        <li>
            <span>
                <img src="{% static 'images/site/icons/email.gif' %}" alt="Home" border="0">
            </span>
            <span>
                <a href="#">
                    Profile
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/mouse.gif' %}" alt="Home" border="0">
            </span>
            <span>
                <a href="#">
                    Account
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/key.gif' %}" alt="Home" border="0">
            </span>
            <span>
                {% comment %} <a href="{% url 'users:logout' %}"> {% endcomment %}
                    Logout
                </a>
            </span>
        </li>
    </ul>
</div>
{% endif %}

<div id="navigation-area" class="mtctitem">
    <h2>Links</h2>
    <ul>
        <li>
            <span>
                <img src="{% static 'images/site/icons/news.gif' %}" alt="Home" border="0">
            </span>
            <span>
                <a href="#">
                    Home
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/pencil.gif' %}" alt="Blog" border="0">
            </span>
            <span>
                <a href="#">
                    Weblog
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/cabinet.gif' %}" alt="Archives" border="0">
            </span>
            <span>
                <a href="#">
                    Archives
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/books.gif' %}" alt="Categories" border="0">
            </span>
            <span>
                <a href="#">
                    Categories
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/issues.gif' %}" alt="Tags" border="0">
            </span>
            <span>
                <a href="#">
                    Tags
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/translate.png' %}" alt="Translate" border="0" style="padding: 2px 0px; height: 20px; width: auto;">
            </span>
            <span>
                {% if request.COOKIES.site_language == 'ja' %}
                    <a href="javascript:changeLang('en');" class="notranslate en">English</a>
                {% endif %}

                {% if request.COOKIES.site_language == 'en' or not request.COOKIES.site_language %}
                    <a href="javascript:changeLang('ja');" class="notranslate ja">日本語</a>
                {% endif %}
            </span>
        </li>
    </ul>
</div>

<div id="fake-ad-area" class="mtctitem">
    {% comment %} <h2>Advertisement</h2> {% endcomment %}
    {% load ad %}
        <img src="{{ "big" | ad }}" alt="Advertisement">
</div>

<div id="fun-stuff" class="mtctitem">
    <h2>Good Stuff</h2>
    <ul>
        <li>
            <span>
                <img src="{% static 'images/site/icons/fork.png' %}" alt="Repositories" border="0" style="padding: 2px; height: 20px; width: 20px;">
            </span>
            <span>
                {% comment %} <a href="{% url 'dev_status:home' %}"> {% endcomment %}
                    My Repositories
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/anistar.gif' %}" alt="Socialify" border="0" style="padding: 2px; height: 20px; width: 20px;">
            </span>
            <span>
                <a href="#">
                    My Anime List
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/windows.gif' %}" alt="Socialify" border="0">
            </span>
            <span>
                <a href="#">
                    Socialify
                </a>
            </span>
        </li>
        {% comment %} <li>
            <span>
                <img src="{% static 'images/site/icons/globe.gif' %}" alt="Mastodon" border="0" style="padding: 2px 5px; height: 20px; width: auto;">
            </span>
            <span>
                <a rel="me" href="https://mastodon.social/@selch">Mastodon</a>
                <img width="11" height="11" src="https://img.icons8.com/glyph-neue/20/d2baff/external-link.png" alt="external-link"/ style="height: 11px; width: 11px; position: relative; top: -1px;">
            </span>
        </li> {% endcomment %}
    </ul>
</div>

<div id="site-spells" class="mtctitem">
    <h2>Site Spells</h2>
    <ul>
        <li>
            {% if request.COOKIES.summonOneko == 'true' %}
                <span>
                    <img src="{% static 'images/site/withdraw_oneko.gif' %}" alt="Oneko" border="0">
                </span>
                <span>
                    <a href="javascript:void(0);" onclick="withdrawOneko();">
                        Withdraw Oneko
                    </a>
                </span>
            {% else %}
                <span>
                    <img src="{% static 'images/site/summon_oneko.gif' %}" alt="Oneko" border="0">
                </span>
                <span>
                    <a href="javascript:void(0);" onclick="summonOneko();">
                        Summon Oneko
                    </a>
                </span>
            {% endif %}
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/patrick-star.gif' %}" alt="Patrick Star" border="0" id="patrick">
            </span>
            <span>
                <a href="javascript:harlemShakeAndBake();">
                    Harlem Shake
                </a>
            </span>
        </li>
        <li>
            <div style="position: fixed; top: 0; left: 0; z-index: 1;">
                <div id="black" style="display: none;" onclick="javascript:handleDVD();">
                    <div id="dvd"></div>
                </div>
            </div>
            <span>
                <img src="{% static 'images/site/dvd.gif' %}" alt="DVD" border="0">
            </span>
            <span>
                <a href="javascript:handleDVD();">
                    DVD SiteSaver
                </a>
            </span>
        </li>
    </ul>
</div>

<div id="archives-area" class="mtctitem">
    <h2>Archives</h2>
    <ul>
        {% for archive in archives %}
        <li>
            <span>
                <img src="{% static 'images/site/icons/cabinet.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="#/{{ archive | date:"F_Y" }}">
                    {{ archive | date:"F Y" }}
                </a>
            </span>
        </li>
        {% endfor %}
        <li>
            <span>
                <img src="{% static 'images/site/icons/cabinet.gif' %}" alt="Archives" border="0">
            </span>
            <span>
                <a href="#">
                    All Archives...
                </a>
            </span>
        </li>
    </ul>
</div>

<div id="categories-area" class="mtctitem">
    <h2>Categories</h2>
    <ul>
        {% for category in categories %}
        <li>
            <span>
                <img src="{% static 'images/site/icons/books.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="#/{{ category.slug }}">
                    {{ category }}
                </a>
            </span>
        </li>
        {% endfor %}
        <li>
            <span>
                <img src="{% static 'images/site/icons/books.gif' %}" alt="Categories" border="0">
            </span>
            <span>
                <a href="#">
                    All Categories...
                </a>
            </span>
        </li>
    </ul>
</div>

{% if user.is_superuser %}
<div id="admin-area" class="mtctitem">
    <h2>Admin</h2>
    <ul>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'blog-admin:new-post' %}">
                    Create New Post
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'blog-admin:posts' %}">
                    Manage Posts
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'blog-admin:comments' %}">
                    Manage Comments
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'admin:auth_user_changelist' %}">
                    Manage Users
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'admin:blog_category_changelist' %}">
                    Manage Categories
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'admin:blog_tag_changelist' %}">
                    Manage Tags
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'admin:announcements_announcement_changelist' %}">
                    Manage Announcements
                </a>
            </span>
        </li>
        <li>
            <span>
                <img src="{% static 'images/site/icons/right_hand.gif' %}" alt="Archive" border="0">
            </span>
            <span>
                <a href="{% url 'admin:index' %}">
                    Admin Area
                </a>
            </span>
        </li>
    </ul>
</div>
{% endif %}

{% if anonymous_users or logged_in_users or admin_users %}
<div id="online-users" class="mtctitem">
    <h2>Who's Online?</h2>
    <div>
        <p>In total, there {% if not anonymous_users|add:logged_in_users|add:admin_users == 1%}are{% else %}is{% endif %} {{ anonymous_users|add:logged_in_users|add:admin_users }} user{% if not anonymous_users|add:logged_in_users|add:admin_users == 1%}s{% endif %} online ::</p>
        <ul>
            <li>{{ anonymous_users }} Guest{% if not anonymous_users == 1%}s{% endif %}</li>
            <li>{{ logged_in_users }} Registered User{% if not logged_in_users == 1%}s{% endif %}</li>
            <li>{{ admin_users }} Staff Member{% if not admin_users == 1%}s{% endif %}</li>
        </ul>
        <p>(Based on users active over the past 5 minutes)</p>
    </div>
</div>
{% endif %}

<div style="text-align: center;" id="vcount" class="mtctitem">
    <h2>You are Visitor #</h2>
    <div>
        <span class="vc">0</span>
        <span class="vc">0</span>
        <span class="vc">6</span>
        <span class="vc">9</span>
        <span class="vc">4</span>
        <span class="vc">2</span>
        <span class="vc">0</span>
    </div>
    <p class="mtsbitem"><small>____________________________________<br>This is just a nice random number!</small></p>
</div>