{% extends 'base_help.html' %}
{% load i18n %}

{% block pagetitle %}Guides & Support{% endblock %}
{% block helpdesk_outer %}

<div class="flex-page-content">
    {% block install_content %}

    {% block wireguard_outer %}
    <div class="install-section content-box">
        <h3>{% trans "With WireGuard" %}</h3>
        <p>
            <a href="https://www.wireguard.com/">WireGuard<i class="fa fa-external-link external-link"></i></a>
            {% blocktrans trimmed %}
                is a simple and modern VPN protocol.
            {% endblocktrans %}
            {% blocktrans trimmed %}
                It's generally considered faster and more secure than OpenVPN, but isn't as widely supported.
                We recommend using it when available.
            {% endblocktrans %}
        </p>
        <hr />
        <div class="install-instructions">
            {% block wireguard_setup %}
                <ol>
                    <li>
                        {% blocktrans trimmed with url="https://www.wireguard.com/install/" %}
                            Download and install the <a href="{{url}}">WireGuard software from its official website</a>.
                        {% endblocktrans %}
                    </li>
                    <li>
                        {% blocktrans trimmed %}
                            Create a new WireGuard key in
                            <a href="/account/wireguard">your account</a> and download the configuration file.
                        {% endblocktrans %}
                        <br />
                        {% trans "You need one for each device that you want to associate with your account."%}
                    </li>
                    <li>
                        {% block wireguard_import %}
                            {% trans "Import the configuration in WireGuard." %}
                            <ul>
                                <li>
                                    {% blocktrans trimmed %}
                                        On Android and iOS, open the app and scan the
                                        <a href="/account/wireguard">QR code from your account</a>
                                    {% endblocktrans %}
                                </li>
                                <li>
                                    {% blocktrans trimmed %}
                                        On Windows, mac OS and Linux, import a configuration file
                                        <a href="/account/wireguard">downloaded from your account</a>
                                    {% endblocktrans %}
                                </li>
                            </ul>
                        {% endblock %}
                    </li>
                    <li>
                        {% block wireguard_activate %}
                        {% trans "Activate the newly imported configuration in WireGuard."%}<br />
                        {% trans "You can check your IP address by refreshing this page (or opening it on the device) and looking at the bottom."%}
                        {% endblock %}
                    </li>
                </ol>
            {% endblock %}
        </div>
    </div>
    {% endblock %}

    {% block openvpn_outer %}
    <div class="install-section content-box">
        <h3>{% trans "With OpenVPN" %}</h3>
        <p>
            <a href="https://www.openvpn.net/">OpenVPN<i class="fa fa-external-link external-link"></i></a>
            {% blocktrans trimmed %}
                is an older VPN protocol and software, still considered secure and one of the best VPN protocols available.
            {% endblocktrans %}
            {% blocktrans trimmed %}
                It has the advantage over WireGuard of having various implementations for many platforms.
            {% endblocktrans %}
        </p>
        <hr />
        <div class="install-instructions">
            {% block openvpn_setup %}
            {% endblock %}
        </div>
    </div>
    {% endblock %}

    {% endblock %}
</div>

{% endblock %}