<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_country_state_detail %}
<sw-modal
    class="sw-country-state-detail"
    :title="modalTitle"
    @modal-close="onCancel"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_country_state_detail_modal %}
    <sw-container
        columns="1fr 1fr"
        gap="20px"
    >
        <!-- eslint-disable sw-deprecation-rules/no-twigjs-blocks, vue/attributes-order -->
        {% block sw_country_state_detail_modal_technical_name %}
        <sw-text-field
            v-model:value="countryState.name"
            name="sw-field--countryState-name"
            :disabled="!acl.can('country.editor') || undefined"
            :label="$tc('sw-country-state-detail.labelName')"
            :placeholder="placeholder(countryState, 'name')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_country_state_detail_modal_shortcode %}
        <sw-text-field
            v-model:value="countryState.shortCode"
            name="sw-field--countryState-shortCode"
            :disabled="!acl.can('country.editor') || undefined"
            :label="$tc('sw-country-state-detail.labelShortCode')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_country_state_detail_modal_position %}
        <sw-number-field
            v-model:value="countryState.position"
            name="sw-field--countryState-position"
            :disabled="!acl.can('country.editor') || undefined"
            :tooltip-text="$tc('sw-country-state-detail.tooltipPosition')"
            number-type="int"
            :label="$tc('sw-country-state-detail.labelPosition')"
        />
        {% endblock %}
    </sw-container>

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

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_country_state_detail_modal_footer_save %}
        <sw-button
            v-tooltip.bottom="tooltipSave"
            class="sw-country-state-detail__save-button"
            variant="primary"
            size="small"
            :disabled="!acl.can('country.editor') || undefined"
            @click="onSave"
        >
            {{ $tc('sw-country-state-detail.buttonSave') }}
        </sw-button>
        {% endblock %}
    </template>
    {% endblock %}
    {% endblock %}
</sw-modal>
{% endblock %}
