{% if not embedded %}{% extends 'base/base.html' %}{% endif %}

{% macro download_box(url, name, alias, description) %}
    <div class="column content has-text-centered">
        <a href="{{url}}" target="_blank" class="has-text-black">
            <figure class="icon is-large">
                {{ icon("box") }}
            </figure>
            <figcaption>
                {% trans %}Click here to install {% endtrans %}<br>
                <span class="has-text-weight-bold">{{name}}</span><br>
                (alias <span class="is-italic">{{alias}}</span>, {{description}})
            </figcaption>
        </a>
    </div>
{% endmacro %}

{% block body_wrapper %}
{{ icon_defs('chat', 'lock-filled', 'blog', 'exchange', 'picture', 'calendar', 'clipboard', 'desktop', 'mobile', 'globe', 'terminal', 'shield', 'ok', 'brush', 'unlink', 'heart-filled', 'group', 'box', 'plus-circled') }}


<section class="hero is-halfheight is-primary">
    <div id="toto" class="hero-body">
        <div class="container">
            <nav class="level is-mobile">
                <div class="level-left is-flex-shrink-1">
                    <div class="level-item">
                        <figure class="image is-128x128">
                            <img src="{{media_path}}icons_svg/sat.svg" alt="Libervia logo">
                        </figure>
                    </div>
                    <div class="level-item is-flex-direction-column is-align-items-flex-start is-flex-shrink-1">
                        <p class="is-size-1 has-text-weight-bold">Libervia</p>
                        <p class="is-size-5">{% trans %}The Universal Communication Ecosystem{% endtrans %}</p>
                    </div>
                </div>
            </nav>
            <div class="message is-info">
                <div class="message-body">
                    <p class="is-size-5">
                    {% trans %}Libervia is a all-in-one tool to manage all your communications needs: instant messaging, (micro)blogging, file sharing, photo albums, events, forums, tasks, etc.{% endtrans %}
                    </p>
                </div>
            </div>
            <nav class="level is-mobile">
                <div class="level-left">
                    <div class="level-item">
                        <a class="button is-large is-info is-rounded" href="#demo">{% trans %}Try it!{% endtrans %}</a>
                    </div>
                    <div class="level-item">
                        <a class="button is-large is-info is-rounded" href="#installation">{% trans %}Install it!{% endtrans %}</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</section>

<section class="hero is-halfheight">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column">
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('chat', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Chat with your friends, family or coworkers{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('lock-filled', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Encrypt conversations to protect your privacy{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('blog', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Blog publicly or only with a group of contacts{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('exchange', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Share files directly (peer to peer) or store them on your server and access them from anywhere{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('picture', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Share private photos albums with your family{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('calendar', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Create and manage events{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('clipboard', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Organise your day to day life or work with lists{% endtrans %}
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="content">
                        <img src="libervia_web_0.8_blog.jpg" alt="Screenshot of Libervia web 0.8 blog" class="screenshot_web">
                    </div>
                </div>
            </div>
        </div>
</section>

<section class="hero is-halfheight has-background-primary-dark has-text-white">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column">
                        <img src="libervia_web_0.8_list_invitation.jpg" alt="">
                </div>
                <div class="column">
                    <div class="content is-size-4">
                        {% trans %}With its easy invitation system, you can smoothly meet your family or friends. It's a perfect fit to share with your loved ones.{% endtrans %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="hero is-halfheight has-background-white-ter">
    <div class="hero-body">
        <div class="columns">
            <div class="column content">
                <figure>
                    <img src="libervia_web_0.8_photo_album.jpg" alt="Libervia-web 0.8 photo album" class="screenshot_web">
                    <figcaption>{% trans %}Share your photo albums{% endtrans %}</figcaption>
                </figure>
            </div>
            <div class="column content">
                <figure>
                <img src="libervia_web_0.8_forums.jpg" alt="Libervia-web 0.8 forums" class="screenshot_web">
                    <figcaption>{% trans %}Arange topics in forums{% endtrans %}</figcaption>
                </figure>
            </div>
            <div class="column content">
                <figure>
                <img src="libervia_web_0.8_events.jpg" alt="Libervia-web 0.8 events" class="screenshot_web">
                    <figcaption>{% trans %}Organise events with your friends{% endtrans %}</figcaption>
                </figure>
            </div>
        </div>

    </div>
</section>


<section class="hero is-halfheight">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column">
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('desktop', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Works natively on desktop{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('globe', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Works on the web{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('mobile', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Works natively on mobile devices (Android){% endtrans %}
                            <span class="is-italic">
                                [{% trans %}work in progress{% endtrans %}]
                            </span>
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('ok', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Cross-platform{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('terminal', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Powerful command-line interface{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('brush', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Highly modular and customisable{% endtrans %}
                        </div>
                    </div>
                    <div class="columns is-gapless is-mobile">
                        <div class="column list_icon">
                            {{ icon('plus-circled', cls='icon') }}
                        </div>
                        <div class="column">
                            {% trans %}Lot of powerful tools and features accompany the project, please check documentation{% endtrans %}
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="content">
                        <img src="libervia_mobile_0.8_chat_upload.jpg" alt="Screenshot of Libervia mobile 0.8 chat with upload panel" class="screenshot_mobile">
                    </div>
                </div>
            </div>
        </div>
</section>

<section class="hero is-halfheight is-primary">
    <div class="hero-body">
        <div class="container content">
            <p class="is-size-4">
            {% trans url_open='<a href="/social_contract" class="is-underline">'|safe,url_close='</a>'|safe %}
            Libervia is a Libre software, based on well established standards (XMPP), decentralised and federating. It is developed around strong ethical values. Check our {{url_open}}social contract{{url_close}}.
            {% endtrans %}
            </p>
        </div>
    </div>
</section>

<section class="hero is-halfheight has-background-white-ter">
    <div class="hero-body is-justify-content-center">
        <div class="is-flex is-flex-direction-column">
            <div class="columns is-gapless is-mobile">
                <div class="column list_icon">
                    {{ icon('unlink', cls='icon') }}
                </div>
                <div class="column">
                    {% trans %}Libervia is a Libre software{% endtrans %}

                    {% trans url_open='<a href="https://repos.goffi.org/sat/file/tip">'|safe,url_close='</a>'|safe %}
                    ({{url_open}}source code{{url_close}}).
                    {% endtrans %}
                </div>
            </div>
            <div class="columns is-gapless is-mobile">
                <div class="column list_icon">
                    {{ icon('heart-filled', cls='icon') }}
                </div>
                <div class="column">
                    {% trans %}We follow a social contract, a moral engagement with the community{% endtrans %}
                </div>
            </div>
            <div class="columns is-gapless is-mobile">
                <div class="column list_icon">
                    {{ icon('group', cls='icon') }}
                </div>
                <div class="column">
                    {% trans %}"Salut a Toi" is the name of the association which manages the project.<br>Major decisions are debated there.{% endtrans %}
                </div>
            </div>
        </div>
    </div>
</section>

{#<div id="demo" class="section container">
    <h1 class="title is-2">{% trans %}Demo{% endtrans %}</h1>
    <div class="box content">
        <p>
        {% trans
            demo_url_open='<a href="https://www.libervia.org" target="_blank">'|safe,
            demo_url_close='</a>'|safe
        -%}
        A demo server is available for you to try Libervia at {{demo_url_open}}https://www.libervia.org{{demo_url_close}}.
        {%- endtrans %}
        </p>
        <div class="message is-warning">
            <div class="message-body">
                {% trans -%}
                Please note that this is only for demo purpose, and all data (including accounts) may be wiped out at any time, don't use it for any serious purpose.
                {%- endtrans %}
            </div>
        </div>
    </div>
</div> #}


<div id="installation" class="section container">
    <h1 class="title is-2">
        {% trans %}Installation{% endtrans %}
    </h1>
    <div class="message is-warning">
        <div class="message-body">
            {% trans %}
            We apologize for the inconvenience, but the Flatpak and Docker images previously provided for our project are outdated and currently not functioning properly. In the meantime, we recommend utilizing the source code directly until we resolve the issue.
            {% endtrans %}
        </div>
    </div>
    <h3 class="subtitle is-3">GNU/Linux</h3>
    <div class="content box">
        <p>{% trans %}If you are on GNU/Linux the recommended way to install Libervia is to use your distribution official packages. Please check your distribution to see if Libervia is available (and request it if it's not). Libervia is available at least on Arch Linux and Debian and its derivated.{% endtrans %}</p>
        {#<p>{% trans flatpak='<a href="https://flatpak.org/" target="_blank" rel="noreferrer noopener">Flatpak</a>'|safe %}If Libervia is not available or the version is too old, you can use {{flatpak}} (which may be installed by default on some recent distributions) to install it, see below.{% endtrans %}</p> #}
    </div>


    {#<h3 class="subtitle is-3">Flatpak</h3>
    <div class="message is-warning">
        <div class="message-body">
            {% trans %}
            Those packages are development preview, they are not stable and bugs and crashes may happen
            {% endtrans %}
        </div>
    </div>
    <div class="columns">
        {% for url, name, alias, description in (
            ("/flatpak/org.libervia.LiberviaDesktop_dev.flatpakref",
             "Libervia Desktop", "Cagou", _("Desktop")),

            ("/flatpak/org.libervia.LiberviaTUI_dev.flatpakref",
             "Libervia TUI", "Primitivus", _("Text User Interface")),

            ("/flatpak/org.libervia.LiberviaCLI_dev.flatpakref",
             "Libervia CLI", "jp", _("Command-Line Interface")),
             ) %}
             {{ download_box(url, name, alias, description) }}
        {% endfor %}
    </div>
    <div class="box content">
        <p>{% trans %}If the links above are not working, you can use the following commands (supposing that Flatpak is already installed):{% endtrans %}</p>
        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaDesktop_dev.flatpakref</pre>
        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaTUI_dev.flatpakref</pre>
        <pre>flatpak install --user https://salut-a-toi.org/flatpak/org.libervia.LiberviaCLI_dev.flatpakref</pre>
    </div> #}


    {#<h3 class="subtitle is-3">Docker</h3>
    <div class="message is-warning">
        <div class="message-body">
            {% trans %}
            Those images are development preview, they are not stable and bugs and crashes may happen
            {% endtrans %}
        </div>
    </div>
    <div class="message is-info">
        <div class="message-body">
            <p>
            {% trans docker_dir='<var>docker</var>'|safe -%}
            Docker Compose and image building files (Dockerfile) are available in the main repository in {{docker_dir}}
            directory.
            {%- endtrans %}
            </p>
        </div>
    </div>
    <div class="box content">
        <p>{% trans libervia_web='<strong>Libervia Web</strong>'|safe -%}
        To try a local demo of {{libervia_web}}, you can use the following instructions (assuming than wget, Docker
        and Docker Compose are installed):
        {%- endtrans %}
        </p>
<pre>wget https://repos.goffi.org/sat/raw-file/tip/docker/web-demo.yml
docker-compose -f web-demo.yml up</pre>
    <p>
    {%- trans demo_url='<a href="http://localhost:8880" target="_blank">http://localhost:8880</a>'|safe -%}
    Then launch your web browser on {{demo_url}}
    {%- endtrans -%}
    </p>
    <p>
    {%- trans remove_instr='<code>docker-compose -f web-demo.yml down</code>'|safe, volume_remove='<code>-v</code>'|safe -%}
    To remove container images, just enter {{remove_instr}} (add {{volume_remove}}
    at the end if you also want to remove the associated volume, i.e. data persistence).
    {%- endtrans -%}
    </p>
    </div>


    <h3 class="subtitle is-3">Android</h3>
    <div class="message is-warning">
        <div class="message-body">
            {% trans %}
            This package is a development preview, it is not stable and bugs and crashes may happen
            {% endtrans %}
        </div>
    </div>
    <div class="columns">
        {{ download_box("https://ftp.goffi.org/cagou/cagou.apk", "Libervia Mobile", "Cagou", "Android") }}
    </div>
    #}

    <h3 class="subtitle is-3">
        {% trans %}Source Code{% endtrans %}
    </h3>
    <div class="box content">
        <p>{% trans doc_url_open='<a href="/documentation">'|safe,
                    doc_url_close='</a>'|safe %}You can also install directly from source code, please check {{doc_url_open}}documentation{{doc_url_close}} for details {% endtrans %}</p>

    </div>
    <h3 class="subtitle is-3">
        {% trans %}Other{% endtrans %}
    </h3>
    <div class="box content">
        <p>{% trans %}Please note that:{% endtrans %}</p>
        <ul>
            <li>{% trans %}Libervia is in heavy development, things evolve quickly.{% endtrans %}</li>
            <li>{% trans %}Feedbacks are welcome{% endtrans %}</li>
            <li>{% trans %}Other projects are completing Libervia ecosystem, please check documentation.{% endtrans %}</li>
            <li>{% trans %}Libervia may be installable on many platforms, contact us if you want to see it on a specific one.{% endtrans %}</li>
        </ul>
    </div>
</div>

{% endblock body_wrapper %}