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

{% block content %}
<div class="flex-page">
    <div class="left-menu">
        <div class="submenu">
            <p class="menu-title">{% trans 'Help' %}</p>
            <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 '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 class="pure-menu-item">
                    <a href="/page/self-diagnosis">
                        <i class="fa fa-wrench fa-fw" aria-hidden="true"></i>&nbsp;
                        {% trans 'Self-Diagnosis' %}
                    </a>
                </li>
                <li><a href="/page/privacy">
                    <i class="fa fa-shield fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Privacy' %}
                </a></li>
            </ul>
        </div>

        <div class="submenu">
            <p class="menu-title">{% trans 'Installation' %}</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>
            </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">
        {% if title %}
            <h2>{{ title }}</h2>
        {% endif %}
        {% block helpdesk_body %}{% endblock %}
    </div>
</div>
{% endblock %}