{% macro steps(current, requiresPayment=true) %}

    <nav aria-label="Progress">
        <ol role="list" class="space-y-4 md:flex md:space-x-8 md:space-y-0">
            <li class="md:flex-1">
                <button
                        data-action="live#emit"
                        data-live-event-param="proceedTo"
                        data-live-step-param="address"
                        class="group w-full text-left flex flex-col border-l-4 {{ ('address' == current or 'select' == current or 'confirm' == current) ? 'border-primary-600 dark:border-primary-300 hover:border-primary-800 dark:hover:border-primary-400' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600' }} py-2 pl-4 md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4"
                        aria-current="step">
                    <span class="text-sm font-medium {{ ('address' == current or 'confirm' == current) ? 'text-primary-600 dark:text-primary-300 group-hover:text-primary-800 dark:group-hover:text-primary-400': 'text-gray-500 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-400' }}">{{ 'payment.step'|trans({}, 'cms') }}
                        1</span>
                    <span class="text-sm font-medium text-black dark:text-gray-300">{{ 'payment.steps.address'|trans({}, 'cms') }}</span>
                </button>
            </li>
            <li class="md:flex-1">
                <button
                        data-action="live#emit"
                        data-live-event-param="proceedTo"
                        data-live-step-param="select"
                        class="group w-full text-left flex flex-col border-l-4 py-2 pl-4 {{ ('select' == current or 'confirm' == current) ? 'border-primary-600 dark:border-primary-300 hover:border-primary-800 dark:hover:border-primary-400' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600' }} md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4">
                    <span class="text-sm font-medium {{ ('select' == current or 'address' == current or 'confirm' == current) ? 'text-primary-600 dark:text-primary-300 group-hover:text-primary-800 dark:group-hover:text-primary-400' : 'text-gray-500 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-400' }}">{{ 'payment.step'|trans({}, 'cms') }}
                        2</span>
                    <span class="text-sm font-medium text-black dark:text-gray-300">{{ 'payment.steps.select'|trans({}, 'cms') }}</span>
                </button>
            </li>
            {% if requiresPayment %}
                <li class="md:flex-1">
                    <button
                            data-action="live#emit"
                            data-live-event-param="proceedTo"
                            data-live-step-param="confirm"
                            class="group w-full text-left flex flex-col border-l-4 py-2 pl-4 {{ ('confirm' == current) ? 'border-primary-600 dark:border-primary-300 hover:border-primary-800 dark:hover:border-primary-400' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600' }} md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4">
                        <span class="text-sm font-medium {{ ('confirm' == current) ? 'text-primary-600 dark:text-primary-300 group-hover:text-primary-800 dark:group-hover:text-primary-400' : 'text-gray-500 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-400' }}">{{ 'payment.step'|trans({}, 'cms') }}
                            3</span>
                        <span class="text-sm font-medium text-black dark:text-gray-300">{{ 'payment.steps.confirm'|trans({}, 'cms') }}</span>
                    </button>
                </li>
            {% endif %}
        </ol>
    </nav>

{% endmacro %}


<div {{ attributes|raw }}>
    {% if this.isConfigured %}

    {% if "confirmed" == step %}

        <div class="max-w-sm mx-auto">
            {% include '@FerienpassCms/partial/modal_confirm.html.twig' with {
                headline: 'payment.success.headline'|trans({}, 'cms'),
                text: 'payment.success.text'|trans({}, 'cms'),
                href: path('cms', { to: 'applications' }),
                linkText: 'payment.success.backToOverview'|trans({}, 'cms')
            } %}
        </div>

    {% elseif attendancesDue is empty %}

        <h2 class="text-lg font-bold leading-6 text-gray-900 dark:text-gray-50">
            {{ 'payment.due.title'|trans({}, 'cms') }}
        </h2>

        {% if app.user.payments is empty %}
            <p class="mt-4 dark:text-gray-400">{{ 'payment.due.nothingDue'|trans({}, 'cms') }}</p>
        {% else %}
            <twig:Cms:Alert type="confirm" class="mt-6 shadow border border-green-700/30"
                            message="{{ 'payment.due.allPaid'|trans({}, 'cms') }}"/>
        {% endif %}

    {% else %}

        {% if "select" == step %}

            {{ _self.steps(step, requiresPayment) }}

            <div class="mt-12">
                <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">{{ 'payment.select.title'|trans({}, 'cms') }}</h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-200">{{ 'payment.select.text'|trans({}, 'cms') }}</p>
            </div>

            {% for participant in this.participants %}
                {% set attendances = attendancesDue|filter(a => a.participant == participant) %}

                <fieldset class="mt-8">
                    <legend class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-50">{{ participant.name }}</legend>
                    <div class="mt-4 divide-y divide-gray-200 dark:divide-gray-800 border-b border-t border-gray-200 dark:border-gray-800">
                        {% for attendance in attendances %}
                            <div class="relative flex items-start py-4">
                                <div class="min-w-0 flex-1 text-sm leading-6">
                                    <label for="{{ "attendance-#{attendance.id}" }}"
                                           class="select-none flex justify-between">
                                        <span class="font-semibold text-gray-900 dark:text-gray-50">{{ attendance.offer.name }}</span>
                                        <span class="text-gray-700 dark:text-gray-200">{{ (attendance.offer.feePayable(attendance.participant, dispatcher)/100)|format_currency('EUR') }}</span>
                                    </label>
                                </div>
                                {% if isSelectable %}
                                    <div class="ml-3 flex h-6 items-center">
                                        <input id="{{ "attendance-#{attendance.id}" }}"
                                               type="checkbox"
                                               data-model="selectedItems[]"
                                               value="{{ attendance.id }}"
                                               class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                                    </div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </fieldset>

            {% endfor %}

            <div class="mt-6">
                {% if creditApplied %}
                    <p class="text-gray-600 text-sm">{{ 'payment.select.debtorBalance'|trans({'amount': creditApplied/100}, 'cms') }}</p>
                {% endif %}

                <p class="mt-2 font-bold text-orange-700 dark:text-orange-400 text-base">
                    {{ 'payment.select.totalAmount'|trans({'amount': totalAmount/100}, 'cms') }}
                </p>
            </div>

            <div class="mt-5">
                {% if totalAmount > 0 %}
                    <twig:Cms:Button variant="primary"
                            data-action="live#emit"
                            data-live-event-param="proceedTo"
                            data-live-step-param="confirm">
                        {{ 'payment.select.continue'|trans({}, 'cms') }}
                    </twig:Cms:Button>
                {% else %}
                    <twig:Cms:Button variant="primary"
                            data-action="live#action"
                            data-live-action-param="settleWithoutPayment">
                        {{ 'payment.select.confirmNow'|trans({}, 'cms') }}
                    </twig:Cms:Button>
                {% endif %}
            </div>

        {% elseif "address" == step %}

            {{ _self.steps(step, requiresPayment) }}

            <div>
                <div class="mt-12">
                    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">{{ 'payment.address.title'|trans({}, 'cms') }}</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-200">{{ 'payment.address.text'|trans({}, 'cms') }}</p>
                </div>

                <div class="mt-6">

                    {% set postalAddress = app.user.postalAddresses|first|default %}
                    {% if postalAddress and postalAddress.street and postalAddress.postalCode and postalAddress.city %}
                        <h3 class="text-base font-bold text-orange-700 dark:text-orange-400">{{ 'payment.address.foundTitle'|trans({}, 'cms') }}</h3>

                        <p class="mt-2 text-base leading-5 text-gray-900 dark:text-gray-300">
                            <span class="block">
                                {{ app.user.firstname }}
                                {{ app.user.lastname }}
                            </span>
                            <span class="block">
                                {{ postalAddress.street }}
                            </span>
                            <span class="block">
                                {{ postalAddress.postalCode }}
                                {{ postalAddress.city }}
                            </span>
                            <span class="block">
                                {{ postalAddress.country }}
                            </span>

                        </p>

                        <div class="mt-5 flex items-center space-x-4">
                            <twig:Cms:Button variant="primary"
                                    data-action="live#emit"
                                    data-live-event-param="proceedTo"
                                    data-live-step-param="select">
                                {{ 'payment.select.continue'|trans({}, 'cms') }}
                            </twig:Cms:Button>


                            <a href="{{ path('cms', { to: 'user_account', alias: 'account' }) }}"
                               class="text-sm font-semibold text-gray-600 dark:text-gray-300 hover:underline hover:text-gray-700 dark:hover:text-gray-300">
                                {{ 'payment.address.correctDetails'|trans({}, 'cms') }}
                            </a>

                        </div>

                    {% else %}
                        <h3 class="text-base font-bold text-orange-700 dark:text-orange-400">{{ 'payment.address.notFoundTitle'|trans({}, 'cms') }}</h3>

                        <twig:Cms:Button variant="primary"
                                href="{{ path('cms', { to: 'user_account', alias: 'account' }) }}"
                                class="mt-5">
                            {{ 'payment.address.notFoundText'|trans({}, 'cms') }}
                        </twig:Cms:Button>
                    {% endif %}

                </div>
            </div>

        {% elseif "confirm" == step %}

            {{ _self.steps(step, requiresPayment) }}

            <div class="mt-12">
                <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">{{ 'payment.confirm.title'|trans({}, 'cms') }}</h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-200">{{ 'payment.confirm.text'|trans({}, 'cms') }}</p>
            </div>

            <div class="mt-6 text-gray-700 dark:text-gray-300 space-y-1">
                <p><span class="font-medium">{{ 'payment.confirm.offersCount'|trans({'count': attendancesForPayment|length}, 'cms') }}</span></p>
                <p><span class="font-medium">{{ 'payment.confirm.amount'|trans({'amount': totalAmount/100}, 'cms') }}</span></p>
            </div>
            <div class="mt-6">
                <twig:Cms:Button variant="primary"
                        data-action="live#action"
                        data-live-action-param="redirectToPay">
                    {{ 'payment.confirm.payAmount'|trans({'amount': totalAmount/100}, 'cms') }}
                </twig:Cms:Button>
            </div>

        {% else %}

            <h3 class="text-lg font-bold leading-6 text-gray-900 dark:text-gray-50">
                <span class="font-medium">{{ 'payment.intro.title'|trans({}, 'cms') }}</span>
            </h3>

            <div class="mt-2 text-sm">
                <p class="text-gray-700 dark:text-gray-200">{{ 'payment.intro.text'|trans({}, 'cms') }}</p>


                {% if requiresPayment %}
                    <p class="mt-2 text-gray-500 dark:text-gray-300">{{ 'payment.intro.providerInfo'|trans({}, 'cms') }}</p>
                {% endif %}
            </div>

            <div class="mt-5">
                <twig:Cms:Button variant="primary"
                        data-action="live#emit"
                        data-live-event-param="proceedTo"
                        data-live-step-param="{{ requiresPayment ? 'address' : 'select' }}">
                    {{ (requiresPayment ? 'payment.intro.payFees' : 'payment.intro.confirmOffers')|trans({}, 'cms') }}
                </twig:Cms:Button>
            </div>
        {% endif %}
    {% endif %}

    {% endif %}
</div>
