<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_app_app_url_changed_modal %}
<sw-modal
    class="sw-app-app-url-changed-modal"
    variant="large"
    :title="$tc('sw-app.component.sw-app-app-url-changed-modal.title')"
    :is-loading="isLoading"
    @modal-close="closeModal"
>
    <template #default>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_app_app_url_changed_modal_content %}
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_app_app_url_changed_modal_content_description %}
        <div class="sw-app-app-url-changed-modal__content-description">
            <h3>{{ $tc('sw-app.component.sw-app-app-url-changed-modal.explanationHeader') }}</h3>
            <div class="sw-app-app-url-changed-modal__content-description-change">
                <span>
                    <b> {{ $tc('sw-app.component.sw-app-app-url-changed-modal.oldLabel') }} </b>
                    {{ urlDiff.oldUrl }}
                </span>
                <br>
                <span>
                    <b> {{ $tc('sw-app.component.sw-app-app-url-changed-modal.newLabel') }} </b>
                    {{ urlDiff.newUrl }}
                </span>
            </div>
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_app_app_url_changed_modal_description_explanation %}
            {{ $tc('sw-app.component.sw-app-app-url-changed-modal.explanation') }}
            {% endblock %}
        </div>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_app_app_url_changed_modal_content_strategies %}
        <div
            v-for="(strategy, index) in strategies"
            :key="`content-strategies-${index}`"
            class="sw-app-app-url-changed-modal__content-choices"
        >
            <sw-button
                class="sw-app-app-url-changed-modal__content-migration-strategy"
                :class="getActiveStyle(strategy)"
                block
                @click="setSelectedStrategy(strategy)"
            >

                <template v-if="isSelected(strategy)">
                    <sw-icon
                        class="sw-app-app-url-changed-modal__migration-button-center"
                        small
                        color="#ffffff"
                        name="regular-circle"
                    />
                    <sw-icon
                        small
                        color="#189eff"
                        name="regular-circle-xxs"
                    />
                </template>
                <sw-icon
                    v-else
                    small
                    name="regular-circle"
                />

                <span class="sw-app-app-url-changed-modal__content-choices-label">
                    {{ getStrategyLabel(strategy) }}
                </span>

                <span class="sw-app-app-url-changed-modal__content-choices-description">
                    {{ getStrategyDescription(strategy) }}
                </span>
            </sw-button>
        </div>
        {% endblock %}
        {% endblock %}
    </template>

    <template #modal-footer>
        <sw-button @click="closeModal">
            {{ $tc('global.default.cancel') }}
        </sw-button>

        <sw-button
            variant="primary"
            @click="confirm"
        >
            {{ $tc('sw-app.component.sw-app-app-url-changed-modal.confirmation') }}
        </sw-button>
    </template>
</sw-modal>
{% endblock %}
