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

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

<div class="flex-page">
    <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 'WireGuard' %}</p>
            <ul>
                <li><a href="/page/install-wireguard">
                    <i class="icon icon-wireguard fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Setup WireGuard' %}
                </a></li>
            </ul>
        </div>

        <div class="submenu">
            <p class="menu-title">{% trans 'OpenVPN' %}</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-gnulinux">
                    <i class="fa fa-linux fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'GNU/Linux' %}
                </a></li>
                <li><a href="/page/install-osx">
                    <i class="fa fa-apple fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'OS X' %}
                </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-openvpn">
                    <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>
    <div class="content-box">
        {% block helpdesk_body %}{% endblock %}
    </div>
</div>
</div>
{% endblock %}