{% extends "base.html.twig" %}
{% block content %}
<div class="intro-page">
     <div class="intro-page-logo">zer.ooo</div>
     <div class="intro-page-welcome-text">vpn as a service</div>
     <ul class="topnav">
    {% if user %}
     <li><a href="/logout">Logout</a></li>
     <li><a href="/panel">Control Panel</a></li>
    {% else %}
     <li><a href="/login">Login</a></li>
     <li><a href="/register">Register</a></li>
    {% endif %}
    </ul>
    <a href="#info-page"><i class="fa fa-angle-double-down fa-5x" aria-hidden="true"></i></a>
  </div>

<div class="info-page" name="info-page">

<div class="info-page-item">
<center><span class="flaticon-user-3"></span></center>
<h1>Anonymous</h1>
<p>To sign up, you'll only need an e-mail address, a username and a password. We offer anonymous payments.</p>
</div>

<div class="info-page-item">
<center><span class="flaticon-like-1"></span></center>
<h1>Open Source</h1>
<p>We believe in the power of open source. Zer.ooo offers OpenVPN and is available for free on GitHub under an AGPL license. </p>
</div>

<div class="info-page-item">
<center><span class="flaticon-key"></span></center>
<h1>Secure</h1>
<p>We are located outside the Five Eyes countries. We do not log traffic or store any traffic details.</p>
</div>
</div>

<div class="technical-page">
  <h1>The technical details</h1>
    <div class="flex-table">
      <div class="flex-table-row">
        <div class="flex-table-header">Logging</div>
        <div class="flex-table-value">None</div>
      </div>
      <div class="flex-table-row">
        <div class="flex-table-header">Five Eyes?</div>
        <div class="flex-table-value">
          <div class="tooltip">Nine Eyes
          <span class="tooltiptext">Only our team has access to the datacenter racks where the hypervisor is stored, so this should not be a concern.</span>
          </div>
        </div>
      </div>
      <div class="flex-table-row">
        <div class="flex-table-header">Amount of servers</div>
        <div class="flex-table-value">{{ serverCount }}</div>
      </div>
      <div class="flex-table-row">
        <div class="flex-table-header">VPN Type</div>
        <div class="flex-table-value">OpenVPN exclusive</div>
      </div>
      <div class="flex-table-row">
        <div class="flex-table-header">IPv6</div>
        <div class="flex-table-value">Coming soon</div>
      </div>
      <div class="flex-table-row">
        <div class="flex-table-header">Multihop</div>
        <div class="flex-table-value">Coming soon</div>
      </div>
      <div class="flex-table-row">
        <div class="flex-table-header">P2P</div>
        <div class="flex-table-value">Allowed</div>
        </div>
      <div class="flex-table-row">
        <div class="flex-table-header">OpenVPN on port 443</div>
        <div class="flex-table-value">Coming soon</div>
      </div>
    </div>
</div>


<div class="footer-page">
  <h1>a {{ author }} production</h1>
<a href="https://github.com/{{ githubRepo }}"><i class="fa fa-github fa-4x" aria-hidden="true"></i></a>
    {% if contributors|length > 0 %}
        <h2>with the help of
        {% for contributor in contributors -%}
            {%- if loop.index0 < (loop.length - 1) and loop.index0 > 0 %}, {% elseif loop.index0 == (loop.length - 1) %} and {% endif -%}
            <a href="{{ contributor.html_url }}">{{ contributor.login }}</a>
        {%- endfor %}
        </h2>
    {% endif %}
</div>
{% endblock %}