{% extends "_base.html" %}

{% block title %}{{ _('About | Lokole') }}{% endblock %}

{% block style %}{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ 'css/about.css' | asset_url }}">
{% endblock %}

{% block content %}{{ super() }}
<main class="container-fluid">

  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      {{ _what_is_opwen() }}
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      {{ _how_does_it_work() }}
    </div>
  </div>

</main>
{% endblock %}

{% macro _what_is_opwen() %}
<div>
  <div class="text-center jumbotron">
    <div class="row">
      <div class="col-sm-12">
        <h2 id="what">{{ _('What is Lokole?') }}</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        {{ _(
        'Lokole is a project of the Canadian-Congolese non-profit organization '
        'Ascoderu that enables rural communities to cheaply and sustainably access '
        "the global communications network via email. As such, Lokole is Ascoderu's "
        'contribution to the United Nations Sustainable Development Goal 9: '
        'achieving global sustainable communications infrastructure.'
        ) }}
      </div>
    </div>
  </div>
</div>
{% endmacro %}

{% macro _how_does_it_work() %}
<div>
  <div class="text-center jumbotron">
    <div class="row">
      <div class="col-sm-12">
        <h2 id="how">{{ _('How does it work?') }}</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        {{ _(
        'The Lokole is a small device that creates a local network: the Lokole '
        'WiFi. You can connect to this network with any device: your phone, '
        'your tablet or your laptop. Once on the network, you access the '
        'Lokole website where you read and write emails via your Ascoderu '
        'account. Once per day, when the cost of bandwidth is cheapest the '
        "Lokole then transmits everyone's emails to the cloud. "
        'In this way, many people can pool their resources to make email '
        'available for everyone.'
        ) }}
      </div>
    </div>
  </div>
</div>
{% endmacro %}
