ejabberd

{% extends "base.html" %}
{% block title %}{% trans "Create Account" %} | {{ app.name }} | {{ site_name }}{% endblock %}
{% block h1 %}{% blocktrans with app_name=app.name %}Join {{ site_name }} with {{ app_name }}{% endblocktrans %}{% endblock %}

{% block content %}
        <p>{% if invite.inviter|user %}
            {% blocktrans with inviter=invite.inviter|user %}You have been invited to chat with <strong>{{ inviter }}</strong> on {{ site_name }}, part of the XMPP secure and decentralized messaging network.{% endblocktrans %}
        {% else %}
            {% blocktrans %}You have been invited to chat on {{ site_name }}, part of the XMPP secure and decentralized messaging network.{% endblocktrans %}
        {% endif %}</p>

        <div class="bd-callout bd-callout-info col-12 col-md-8">
                    <svg class="svg-inline--fa fa-lightbulb fa-w-11 text-warning" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg=""><path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg>
                    {% blocktrans with app_name=app.name %}You can start chatting right away with {{ app_name }}. Let's get started!{% endblocktrans %}
                </div>

        <div class="card client-card {% for item in app.platforms %}app-platform-{{ item|lower }} {% endfor %} flex-wrap col-sm-12 col-md-8 col-lg-5 p-3 my-3">
            <div class="row no-gutters h-100">
                <div class="col-md-4">
                    <img src="{{ static }}/{{ app.image }}" class="img-fluid" alt="{{ app.alttext }}">
                </div>
                <div class="col-md-8 h-100 ps-md-1">
                    <div class="card-body d-flex flex-column h-100 pb-0 p-md-0">
                        <h3 class="card-title text-nowrap mb-1 h5">{{ app.name }}</h3>
                        <div>
                            {% for item in app.platforms %}<span class="badge text-bg-info client-platform-badge client-platform-badge-{{ item|lower }} me-1 mb-3">{{ item }}</span> {% endfor %}
                        </div>
                        <p class="card-text">{{ app.text }}</p>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="h3 alert alert-info p-2" clear-both">{% blocktrans with app_name=app.name %}Step 1: Install {{ app_name }}{% endblocktrans %}</h2>

        <p>{% if app.download.text %}{{ app.download.text }}{% else %}{% blocktrans with app_name=app.name %}Download and install {{ app_name }} below:{% endblocktrans %}{% endif %}</p>

        <div class="ms-5">
            {% for button in app.download.buttons %}
            {% if button.image %}
            <a href="{% if button.magic_link %}{{ button.magic_link }}{% else %}{{ button.url }}{% endif %}" {% if button.target %}target="{{ button.target }}"{% endif %} rel="noopener" tabindex="3">
                <img src="{{ button.image }}" {% if button.alttext %}alt="{{ button.alttext }}"{% endif %} class="invite-download-button">
            </a>
            {% endif %}
            {% if button.text %}
            <a href="{{ button.url }}" {% if button.target %}target="{{ button.target }}"{% endif %} class="btn btn-primary" rel="noopener" tabindex="4">
                {{ button.text }}
            </a>
            {% endif %}
            {% endfor %}
        </div>

        <p class="mt-3">{% blocktrans with app_name=app.name %}After successfully installing {{ app_name }}, come back to this page and <strong>continue with Step 2</strong>.{% endblocktrans %}</p>

        <h2 class="h3 alert alert-info p-2">{% trans "Step 2: Activate your account" %}</h2>

        <p>{% trans "Installed ok? Great! <strong>Click or tap the button below</strong> to accept your invite and continue with your account setup:" %}</p>

        <div class="w-100 text-center text-md-start">
            <a href="{{ uri }}" id="uri-cta" class="btn btn-success ms-md-5 mt-1 mb-3" tabindex="5">{% blocktrans with app_name=app.name %}Accept invite using {{ app_name }}{% endblocktrans %}</a><br/>
        </div>

        <p>{% blocktrans with app_name=app.name %}After clicking the button you will be taken to {{ app_name }} to finish setting up your new {{ site_name }} account.{% endblocktrans %}</p>
        <nav aria-label="{% trans 'Page navigation' %}">
            <ul class="pagination mb-0">
                <li class="page-item"><a tabindex="6" class="page-link" href="/{{ base }}/{{ token }}" aria-label="{% trans 'Previous' %}">
                    <span aria-hidden="true">&laquo;</span>
                    <span>{% trans "Previous" %}</span>
                </a></li>
            </ul>
        </nav>
{% endblock %}