<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_text_editor_toolbar_button_link_menu %}
<div class="sw-text-editor-toolbar-button__link-menu">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_text_editor_toolbar_button_link_menu_content %}
    <div class="sw-text-editor-toolbar-button__link-menu-content">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type %}
        <sw-select-field
            :value="linkCategory"
            :label="$tc('sw-text-editor-toolbar.link.labelType')"
            require
            @update:value="onSelectFieldChange"
        >
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_text_editor_toolbar_button_link_menu_content_type_options %}
            <option value="link">
                {{ $tc('sw-text-editor-toolbar.link.labelUrl') }}
            </option>
            <option value="detail">
                {{ $tc('sw-text-editor-toolbar.link.labelProduct') }}
            </option>
            <option value="navigation">
                {{ $tc('sw-text-editor-toolbar.link.labelCategory') }}
            </option>
            <option value="media">
                {{ $tc('sw-text-editor-toolbar.link.labelMedia') }}
            </option>
            <option value="email">
                {{ $tc('sw-text-editor-toolbar.link.labelEmail') }}
            </option>
            <option value="phone">
                {{ $tc('sw-text-editor-toolbar.link.labelPhoneNumber') }}
            </option>
            {% endblock %}
        </sw-select-field>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs %}
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_link %}
        <sw-text-field
            v-if="linkCategory === 'link'"
            v-model:value="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholder')"
            name="sw-field--linkTarget"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_phone %}
        <sw-text-field
            v-else-if="linkCategory === 'phone'"
            v-model:value="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderPhoneNumber')"
            name="sw-field--linkTarget"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_email %}
        <sw-email-field
            v-else-if="linkCategory === 'email'"
            v-model:value="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderEmail')"
            name="sw-field--linkTarget"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_detail %}
        <sw-entity-single-select
            v-else-if="linkCategory === 'detail'"
            v-model:value="linkTarget"
            class="sw-text-editor-link-menu__entity-single-select"
            entity="product"
            should-show-active-state
            :criteria="entityFilter"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderProduct')"
            show-clearable-button
            display-variants
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_category %}
        <sw-category-tree-field
            v-else-if="linkCategory === 'navigation'"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :placeholder="$tc('sw-text-editor-toolbar.link.placeholderCategory')"
            :categories-collection="categoryCollection"
            single-select
            @selection-add="replaceCategorySelection"
            @selection-remove="removeCategorySelection"
        />
        {% endblock %}
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_inputs_media %}
        <sw-media-field
            v-else-if="linkCategory === 'media'"
            v-model:value="linkTarget"
            :label="$tc('sw-text-editor-toolbar.link.linkTo')"
            :criteria="entityFilter"
            single-select
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_opens_new_tab %}
        <sw-switch-field
            v-if="!['phone', 'email'].includes(linkCategory)"
            v-model:value="opensNewTab"
            class="sw-text-editor-toolbar-button__link-menu-switch sw-text-editor-toolbar-button__link-menu-new-tab"
            :label="$tc('sw-text-editor-toolbar.link.openInNewTab')"
            no-margin-top
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_display_as_button %}
        <sw-switch-field
            v-model:value="displayAsButton"
            class="sw-text-editor-toolbar-button__link-menu-switch sw-text-editor-toolbar-button__link-menu-display-button"
            :label="$tc('sw-text-editor-toolbar.link.displayAsButton')"
            no-margin-top
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_content_type_button_type %}
        <sw-select-field
            v-if="displayAsButton"
            v-model:value="buttonVariant"
            class="sw-text-editor-link-menu__button-variant"
            :label="$tc('sw-text-editor-toolbar.link.buttonVariant')"
            :options="buttonVariantList"
            require
        />
        {% endblock %}
    </div>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_text_editor_toolbar_button_link_menu_buttons %}
    <div class="sw-text-editor-toolbar-button__link-menu-buttons">
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_button_remove %}
        <sw-button
            class="sw-text-editor-toolbar-button__link-menu-buttons-button-remove"
            variant="ghost-danger"
            size="small"
            :disabled="!linkTarget"
            @click="removeLink"
        >
            {{ $tc('global.default.remove') }}
        </sw-button>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_text_editor_toolbar_button_link_menu_button_insert %}
        <sw-button
            class="sw-text-editor-toolbar-button__link-menu-buttons-button-insert"
            variant="primary"
            size="small"
            :disabled="!linkTarget"
            @click="setLink"
        >
            {{ $tc('global.default.add') }}
        </sw-button>
        {% endblock %}
    </div>
    {% endblock %}
</div>
{% endblock %}
