<div class="row mb-5 flex-lg-column">
    {# 1.1 group is free and public, we can join it #}
    {% if is_public and group.membership.isFree %}
        <form action="{{ path('app_user_group_join', {id: group.id}) }}" method="post">
            <input type="hidden"
                   name="token"
                   value="{{ csrf_token('join_group') }}"
            />
            <div class="d-grid col col-lg-4 mx-auto">
                <button class="btn btn-primary"
                        type="submit">
                    <i class="bi bi-person-fill-add"></i>
                    {{ (i18n_prefix ~ '.group_join.form.submit')|trans }}
                </button>
            </div>
        </form>

    {# 1.2 group is not free, we have to pay, display the offers #}
    {% elseif group.hasActiveOffers %}

        {% include 'components/group/_first_offer.html.twig' with {group} %}
        {% include 'components/group/_modal_offers.html.twig' with {
            offers: group.activeOffers
        } %}

    {# 1.3 group is not correclty configured, it doesn't have any offer configured yet. #}
    {% else %}
        <p class="text-center">{{ (i18n_prefix ~ '.no_offer')|trans }}</p>
    {% endif %}
</div>
