<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_first_run_wizard_welcome %}
<div class="sw-first-run-wizard-welcome">
    <div class="center">
        <img
            class="sw-first-run-wizard__welcome-image"
            :src="assetFilter('/administration/static/img/first-run-wizard/welcome.svg')"
            alt=""
        >
        <h4 class="headline-welcome">
            {{ $tc('sw-first-run-wizard.welcome.headlineWelcome') }}
        </h4>
        <p
            class="text-welcome"
            v-html="$tc('sw-first-run-wizard.welcome.messageWelcome')"
        ></p>
    </div>

    <h5
        v-if="languagePlugins.length"
        class="text-change-language"
    >
        {{ $tc('sw-first-run-wizard.welcome.headlineChangeLanguage') }}
    </h5>

    <sw-loader v-if="isLoading" />

    <sw-container
        columns="1fr 1fr"
        gap="24px 0"
    >
        <sw-plugin-card
            v-for="languagePlugin in languagePlugins"
            :key="languagePlugin.name"
            :plugin="languagePlugin"
            @on-plugin-installed="onPluginInstalled"
            @extension-activated="$emit('extension-activated', $event)"
        />
    </sw-container>

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_first_run_wizard_welcome_confirm_language_switch_modal %}
    <sw-modal
        v-if="showConfirmLanguageSwitchModal"
        variant="small"
        :title="$tc('sw-first-run-wizard.welcome.switchLanguageModalTitle')"
        class="sw-first-run-wizard-confirmLanguageSwitch-modal"
        @modal-close="onCancelSwitch"
    >

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_first_run_wizard_welcome_confirm_language_switch_modal_text %}
        <p class="sw-first-run-wizard-welcome__modal-text">
            {{ $tc('sw-first-run-wizard.welcome.switchLanguageMessage', {}, { pluginName: latestTouchedPlugin.name }) }}
        </p>
        <sw-select-field
            v-model:value="user.localeId"
            class="sw-profile__language"
            :label="$tc('sw-users-permissions.users.user-detail.labelLanguage')"
        >
            <option
                v-for="language in languages"
                :key="language.locale.id"
                :value="language.locale.id"
                :selected="user.localeId === language.locale.id"
            >
                {{ language.customLabel }}
            </option>
        </sw-select-field>
        <sw-password-field
            v-model:value="user.pw"
            type="password"
            :label="$tc('sw-first-run-wizard.shopwareAccount.passwordPlaceholder')"
            @keypress.enter="onConfirmLanguageSwitch"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_first_run_wizard_welcome_confirm_language_switch_modal_footer %}
        <template #modal-footer>
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_first_run_wizard_welcome_confirm_language_switch_modal_action_cancel %}
            <sw-button
                size="small"
                @click="onCancelSwitch"
            >
                {{ $tc('global.default.cancel') }}
            </sw-button>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_first_run_wizard_welcome_confirm_language_switch_modal_action_switch %}
            <sw-button
                size="small"
                variant="primary"
                @click="onConfirmLanguageSwitch"
            >
                {{ $tc('sw-first-run-wizard.welcome.confirmLanguageSwitch') }}
            </sw-button>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}
</div>
{% endblock %}
