{% extends 'layout.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="content pure-g">
    <div class="pure-u-1">
        <h2>{% block pagetitle %}{{ title|default:"Support" }}{% endblock %}</h2>
    </div>

<div class="flex-page pure-u-1 pure-u-lg-5-6 pure-u-xl-2-3">
    <div class="left-menu">
        <div class="submenu">
            <ul>
                <li class="pure-menu-item">
                    <a href="{% url 'page' 'help' %}">
                        <i class="fa fa-life-ring fa-fw" aria-hidden="true"></i>&nbsp;
                        {% trans 'Guides & Support' %}
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="{% url 'kb:kb_index' %}">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp;
                        {% trans 'Knowledge Base' %}
                    </a>
                </li>
                <li><a href="/tickets/">
                    <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Tickets' %}
                    {% if n_open_tickets > 0 %}(<b>{{n_open_tickets}}</b>){% endif %}
                </a></li>
                {% if perms.tickets.view_any_ticket %}
                <li><a href="/tickets/all_open">
                    <i class="fa fa-fire-extinguisher fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'All Tickets' %}
                    {% if n_all_tickets > 0 %}({{all_open_n}}){% endif %}
                </a></li>
                {% endif %}
            </ul>
        </div>

        <div class="submenu">
            <p class="menu-title">{% trans 'Setup Guides' %}</p>
            <ul>
                <li><a href="/page/install-android">
                    <i class="fa fa-android fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Android' %}
                </a></li>
                <li><a href="/page/install-windows">
                    <i class="fa fa-windows fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Windows' %}
                </a></li>
                <li><a href="/page/install-linux">
                    <i class="fa fa-linux fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Linux' %}
                </a></li>
                <li><a href="/page/install-osx">
                    <i class="fa fa-apple fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'macOS' %}
                </a></li>
                <li><a href="/page/install-chromeos">
                    <i class="fa fa-chrome fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Chrome OS' %}
                </a></li>
                <li><a href="/page/install-other">
                    <i class="fa fa-server fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Other' %}
                </a></li>
            </ul>
        </div>

        <div class="submenu">
            <p class="menu-title">{% trans 'Advanced' %}</p>
            <ul>
                <li><a href="/page/advanced-tor">
                    <i class="fa fa-user-secret fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Tor' %}
                </a></li>
            </ul>
        </div>
    </div>
    {% block helpdesk_outer %}
    <div class="content-box">
        {% block helpdesk_body %}{% endblock %}
    </div>
    {% endblock %}
</div>
</div>
{% endblock %}