{% import "macros.html" as macros%}
{% block hamburgerjs %}
<link rel="stylesheet" href="{{ "js/sidr/stylesheets/jquery.sidr.dark.css"|media }}">
<script type='text/javascript' src='{{ "js/new.js"|media }}'></script>
{% endblock %}
<div class="mobile-hamburger" >
    <a id="simple-menu-back" href="#sidr" style="padding-left: 1%">
        <i class="fa fa-bars fa-2x mobile-hamburger-icon"></i>
    </a>
    <div class="pop-up" id="sidr">
        <div class="profile">
            <div class="stat">
                {%- if request.user.is_authenticated() -%}
                    <table>
                        <tr>
                            <td style="white-space:nowrap;" class="pop-td image">
                                <a href="{{ request.user.get_absolute_url() }}" style="text-decoration: none">{{ macros.gravatar(request.user, 40) }}</a>
                            </td>
                            <td colspan="2" class="username pop-td">
                                <a href="{{ request.user.get_absolute_url() }}" style="text-decoration: none">{{ request.user.username|escape }}</a> 
                            </td>
                        </tr>
                    </table>
                    <table style="width: 100%">
                        <tr class="pop-td">
                            <td style="padding-top: 0.5em">
                                <span class="user-info" style="font-size: 1.2em">
                                    {{ macros.inbox_link(request.user) }}
                                    {{ macros.moderation_items_link(request.user, moderation_items) }}
                                    {%- if settings.KARMA_MODE != 'hidden' or settings.BADGES_MODE != 'hidden' -%}
                                        {{ macros.user_long_score_and_badge_summary(user) }}
                                    {%- endif -%}
                                </span>
                            </td>
                        </tr>
                        <tr class="pop-td">
                            <td style="padding-top: 0.5em">
                                {% if settings.USE_ASKBOT_LOGIN_SYSTEM %}
                                     <a href="{{ settings.LOGOUT_URL }}?next={{ settings.LOGOUT_REDIRECT_URL }}" style="text-decoration: none">{% trans %}Sign Out{% endtrans %}</a>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                {% elif settings.USE_ASKBOT_LOGIN_SYSTEM %}
                    <table>
                        <tr>
                            <td style="font-size: 1.1em; padding-top:0.5em">
                                Hi there! Please <a href="{{ settings.LOGIN_URL }}?next={{request.path|clean_login_url|escape}}" style="color: #3c6eb4">{% trans %} sign in{% endtrans %}</a>
                            </td>
                        </tr>
                    </table>
                {% endif %}
            </div>
        </div>
        <div class="menu-items">
            {% include "widgets/mobile_scope_nav.html" %}
        </div>
        <div class="footer-items">
            <ul style="margin-bottom: 0; margin-left: 0">
                <li><div class="list-item">
                    <a 
                      id="navTags"
                      href="{% url tags %}"
                      {% if active_tab == 'tags' %}class="on"{% endif %}
                     >{% trans %}TAGS{% endtrans %}</a>
                </div></li>
                <li><div class="list-item">
                    {% if settings.GROUPS_ENABLED %}
                        <span class="dropdown">
                        <a
                          id="navGroups" 
                          {% if active_tab == 'groups' %}class="on"{% endif %}
                          href="{% url groups %}" data-target="#">
                          {% trans %}PEOPLE & GROUPS{% endtrans %}
                        </a>
                        </span><br>
                        {%else%}
                        <a 
                          id="navUsers"
                          href="{% url users %}"
                          {% if active_tab == 'users' %}class="on"{% endif %}
                        >{% trans %}USERS{% endtrans %}</a><br>
                        {% endif %}
                </div></li>
                <li><div class="list-item">
                    {% if settings.BADGES_MODE == 'public' %}
                        <a 
                          id="navBadges"
                          href="{% url badges %}"
                          {% if active_tab == 'badges' %}class="on"{% endif %}
                        >{% trans %}BADGES{% endtrans %}</a><br>
                        {% endif %}
                </div></li>
            </ul>
        </div>
    </div>
</div>