{#
Group invitation form page.

Displays the group invitation form to users with the appropriate permissions.

:param form: The group invitation form.
:type form: :class:`~canaille.core.endpoints.forms.GroupInvitationForm`
:param group: The group to invite members to.
:type group: :class:`~canaille.core.models.Group`
#}
{% extends theme('base.html') %}
{% import 'macro/form.html' as fui %}

{%- block title -%}
    {%- trans group_name=group.display_name %}Invite members to {{ group_name }}{% endtrans -%}
{%- endblock -%}

{% block script %}
    <script src="{{ url_for("static", filename="js/copy.js") }}" defer></script>
{% endblock %}

{% block submenu %}
    <a class="item" href="{{ url_for('core.groups.groups') }}">
        <i class="th list icon"></i>
        {% trans %}Groups{% endtrans %}
    </a>
    <a class="item" href="{{ url_for('core.groups.group', group=group) }}">
        <i class="users icon"></i>
        {% trans %}View Group{% endtrans %}
    </a>
    <a class="active item" href="{{ url_for('core.groups.invite_to_group', group=group) }}">
        <i class="paper plane icon"></i>
        {% trans %}Invite Members{% endtrans %}
    </a>
{% endblock %}

{% block content %}
    <div class="invitationform">
        {% if form_validated %}

            <div class="ui segment">
                <h2 class="ui center aligned header">
                    <div class="content">
                        {{ _("Invitation sent") }}
                    </div>
                </h2>

                <div class="ui message">
                    {% trans %}If you need to provide this link by other ways than email, you can copy it here:{% endtrans %}
                </div>

                <div class="ui fluid action input">
                    <input type="text" value="{{ invitation_url }}" readonly class="copy-text" id="invitation-url" data-copy="invitation-url">
                    <button class="ui primary right labeled icon button copy-button" data-copy="invitation-url">
                        <i class="copy icon"></i>
                        {% trans %}Copy{% endtrans %}
                    </button>
                </div>

                <br>

                <div class="ui center aligned container">
                    <div class="ui stackable buttons">
                        <a class="ui button" href="{{ url_for("core.groups.group", group=group) }}">
                            {{ _("View Group") }}
                        </a>
                        <a href="{{ url_for('core.groups.invite_to_group', group=group) }}" class="ui button">
                            {{ _("Invite another member") }}
                        </a>
                    </div>
                </div>
            </div>

        {% else %}

            <div class="ui segment">
                <h2 class="ui center aligned header">
                    <div class="content">
                        {% trans group_name=group.display_name %}Invite members to {{ group_name }}{% endtrans %}
                    </div>
                </h2>

                <div class="ui message">
                    {% trans %}
                        After this form is sent, the recipient will receive an email
                        containing a link to join this group.
                    {% endtrans %}
                </div>

                {% call fui.render_form(form) %}
                    {% block email_field scoped %}
                        {{ fui.render_field(form.email, icon="email") }}
                    {% endblock %}

                    <div class="ui right aligned container">
                        <div class="ui stackable buttons">
                            <a class="ui right floated button" href="{{ url_for("core.groups.group", group=group) }}">
                                {{ _("View Group") }}
                            </a>
                            <button type="submit" class="ui right floated primary button">
                                {{ _("Send the invitation") }}
                            </button>
                        </div>
                    </div>
                {% endcall %}
            </div>
        {% endif %}
    </div>
{% endblock %}