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

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

<div class="pure-u-1 pure-u-lg-5-6 pure-u-xl-2-3  flex-page">
    <div class="left-menu">
        <div class="submenu">
            <ul>
                <li><a href="/account/">
                    <i class="fa fa-dashboard fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Your account' %}
                </a></li>
                <li><a href="/account/config">
                    <i class="fa fa-download fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'OpenVPN' %}
                </a></li>
                <li><a href="/account/wireguard">
                    <i class="icon icon-wireguard fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'WireGuard' %}
                </a></li>
                <li><a href="/payments">
                    <i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Payments' %}
                </a></li>
                <li><a href="/account/settings">
                    <i class="fa fa-gears fa-fw" aria-hidden="true"></i>&nbsp;
                    {% trans 'Settings' %}
                </a></li>
            </ul>
        </div>
    </div>
    {% block account_content_outer %}
    <div class="flex-page-content">
        <div class="content-box">
        {% block account_content %}{% endblock %}
        </div>
    </div>
    {% endblock %}
</div>
</div>
{% endblock %}