<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_order_document_settings_modal %}
<sw-modal
    :title="modalTitle"
    class="sw-order-document-settings-modal"
    @modal-close="onCancel"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_first_row %}
    <sw-container
        columns="1fr 1fr"
        gap="0px 14px"
    >
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_document_settings_modal_form_document_number %}
        <sw-text-field
            v-model:value="documentConfig.documentNumber"
            :label="$tc('sw-order.documentModal.labelDocumentNumber')"
        />
        {% endblock %}
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_document_settings_modal_form_document_date %}
        <sw-datepicker
            v-model:value="documentConfig.documentDate"
            date-type="date"
            required
            hide-hint
            :label="$tc('sw-order.documentModal.labelDocumentDate')"
            :placeholder="$tc('sw-datepicker.date.placeholder')"
        />
        {% endblock %}
    </sw-container>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_file_upload %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_file_upload_toggle %}
    <sw-switch-field
        v-model:value="uploadDocument"
        name="sw-field--uploadDocument"
        class="sw-order-document-settings-modal__file-toggle"
        :label="$tc('sw-order.documentModal.fileInputLabel')"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_file_upload_input %}
    <sw-upload-listener
        v-if="uploadDocument"
        auto-upload
        :upload-tag="order.id"
        @media-upload-finish="successfulUploadFromUrl"
    />
    <sw-media-upload-v2
        v-if="uploadDocument"
        ref="fileInput"
        variant="small"
        class="sw-order-document-settings-modal__file-input"
        use-file-data
        :source="selectedDocumentFile"
        :allow-multi-select="false"
        :file-accept="features.fileAcceptTypes"
        :max-file-size="features.uploadFileSizeLimit"
        default-folder="document"
        :upload-tag="order.id"
        @media-upload-add-file="onAddDocument"
        @media-upload-sidebar-open="openMediaModal"
        @media-upload-remove-image="removeCustomDocument"
    />
    {% endblock %}
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_media_modal %}
    <sw-media-modal-v2
        v-if="showMediaModal"
        :allow-multi-select="false"
        :file-accept="features.fileAcceptTypes"
        @media-modal-selection-change="onAddMediaFromLibrary"
        @modal-close="closeMediaModal"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_additional_content %}{% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_document_comment %}
    <sw-textarea-field
        v-model:value="documentConfig.documentComment"
        name="sw-field--documentConfig-documentComment"
        class="sw-order-document-settings-modal__comment"
        :label="$tc('sw-order.documentModal.labelDocumentComment')"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_document_settings_modal_form_document_footer %}
    <template #modal-footer>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_document_settings_modal_form_document_footer_preview %}
        <sw-button
            class="sw-order-document-settings-modal__preview-button"
            size="small"
            :disabled="isLoadingDocument"
            :is-loading="isLoadingPreview"
            @click="onPreview"
        >
            {{ $tc('sw-order.documentModal.labelPreview') }}
        </sw-button>
        {% endblock %}

        <div>
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_order_document_settings_modal_form_document_footer_cancel %}
            <sw-button
                size="small"
                @click="onCancel"
            >
                {{ $tc('sw-order.documentModal.labelCancel') }}
            </sw-button>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_order_document_settings_modal_form_document_footer_split_button %}
            <sw-button-group split-button>
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_order_document_settings_modal_form_document_footer_split_button_create %}
                <sw-button
                    class="sw-order-document-settings-modal__create"
                    variant="primary"
                    size="small"
                    :disabled="!documentPreconditionsFulfilled || isLoadingPreview"
                    :is-loading="isLoadingDocument"
                    @click="onCreateDocument"
                >
                    {{ $tc('sw-order.documentModal.labelCreate') }}
                </sw-button>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_order_document_settings_modal_form_document_footer_split_button_context %}
                <sw-context-button
                    :disabled="!documentPreconditionsFulfilled || undefined"
                >
                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_order_document_settings_modal_form_document_footer_split_button_context_arrow %}
                    <template #button>
                        <sw-button
                            square
                            variant="primary"
                            size="small"
                            :disabled="!documentPreconditionsFulfilled"
                        >
                            <sw-icon
                                name="regular-chevron-down-xs"
                                size="16"
                            />
                        </sw-button>
                    </template>
                    {% endblock %}

                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_order_document_settings_modal_form_document_footer_split_button_context_create_send %}
                    <sw-context-menu-item
                        class="sw-order-document-settings-modal__send-button"
                        @click="onCreateDocument('send')"
                    >
                        {{ $tc('sw-order.documentModal.labelCreateSend') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_order_document_settings_modal_form_document_footer_split_button_context_create_download %}
                    <sw-context-menu-item
                        class="sw-order-document-settings-modal__download-button"
                        @click="onCreateDocument('download')"
                    >
                        {{ $tc('sw-order.documentModal.labelCreateDownloadPdf') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </sw-context-button>
                {% endblock %}
            </sw-button-group>
            {% endblock %}
        </div>
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
