{% load i18n %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ LANGUAGE_CODE }}">
<head>
    {% if title %}
        <title>{{ title }} - CCrypto VPN</title>
    {% else %}
        <title>CCrypto VPN</title>
    {% endif %}
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="{% static 'css/pure-min.css' %}" media="screen" />
    <link rel="stylesheet" href="{% static 'css/grids-responsive-min.css' %}" media="screen" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" media="screen" />
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" media="screen" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    
    {{ADDITIONAL_HEADER_HTML | safe}}
    {% block headers %}{% endblock %}
</head>
<body>
    <header>
        <div class="inner">
            <div id="logo">
                <h2><a href="https://ccrypto.org/">CCrypto</a></h2>
                <h1><a href="https://vpn.ccrypto.org/">VPN</a></h1>
            </div>
            <nav>
                <div>
                    <div class="flex-spacer"></div>
                    <ul class="user-menu">
                        {% if user.is_authenticated %}
                            <li><a class="button thin" href="/account/">{% trans 'Your account' %}</a></li>
                            <li><a class="button thin" href="/account/logout">{% trans 'Logout' %}</a></li>
                        {% else %}
                            <li><a href="/account/signup" class="button thin">{% trans 'Sign up' %}</a></li>
                            <li><a href="/account/login" class="button thin">{% trans 'Log in' %}</a></li>
                        {% endif %}
                    </ul>
                </div>
                <ul class="site-menu">
                    <li><a href="/">{% trans "VPN" %}</a></li>
                    <li><a href="/status">{% trans "Servers" %}</a></li>
                    <li><a href="/page/help">{% trans "Guides & Support" %}</a></li>
                    {% if user.is_staff %}
                    <li><a href="/admin/">{% trans "Admin" %}</a></li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </header>

    {% block wrap %}
    {% if motd %}
        <div class="message motd">
            <p>{{ motd | safe }}</p>
        </div>
    {% endif %}
    {% for message in messages %}
        <div class="message">
            <p class="{{message.tags}}">{{ message }}</p>
        </div>
    {% endfor %}

    {% block content %}{% endblock %}
    {% endblock %}

    <footer id="footer">
        <ul class="footer-column">
            <li class="language-selector">
                ‣ {% trans "Available in" %}
                <ul>
                    {% for l, n in LANGUAGES %}
                    <li><a href="{% url 'set_lang' %}?lang={{l}}&amp;next={{request.get_full_path}}">{{n}}</a></li>
                    {% endfor %}
                </ul>
            </li>
        </ul>
        <ul class="footer-column">
            <li>‣ {% trans 'By' %} <a href="https://ccrypto.org/">CCrypto</a></li>
            <li>‣ <a href="https://status.ccrypto.org/">{% trans 'Service Status' %}</a></li>
            <li>‣ <a href="https://git.ccrypto.org/CCrypto/ccvpn3">{% trans 'Source code' %}</a></li>
        </ul>
        <ul class="footer-column">
            <li>‣ <a href="/page/privacy">{% trans 'Privacy Policy' %}</a></li>
            <li>‣ <a href="/page/tos">{% trans 'Terms of Service' %}</a></li>
            <li>‣ <a href="/page/help">{% trans "Guides & Support" %}</a></li>
        </ul>
        <ul class="footer-column">
            <li>
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <a href="https://twitter.com/CCrypto_VPN">
                @CCrypto_VPN</a>
            </li>
            <li class="vpn-status-box">
                {% trans 'Your IP address:'%} {{CLIENT_IP}}<br />
                {% if CLIENT_ON_VPN %}
                    {% trans 'You are connected over CCVPN' %}
                {% else %}
                    {% trans 'You are not connected over CCVPN' %}
                {% endif %}
            </li>
        </ul>
    </footer>

    {{ADDITIONAL_HTML | safe}}

    {% block livechat_thing %}
        {% if not request.user.is_staff %}
            {% if SUPPORT_TEMPLATE %}
                {% include SUPPORT_TEMPLATE with request=request %}
            {% endif %}
        {% endif %}
    {% endblock %}
</body>
</html>

