{{--
    [#40041] SCR-04 — 「APIキーを削除します」 modal xác nhận xoá.
    Không dùng header chuẩn (`:header="false"`, E-046); nút 「削除する」 enable ngay,
    KHÔNG yêu cầu gõ lại tên key (E-047).
--}}
<lme-modal v-model="showDeleteModal" :header="false" :width="480">
    <div class="api-delete-modal">
        <div class="api-delete-modal__head">
            <div class="api-delete-modal__head-left">
                <lme-icon file_name="warning-circle-filled" size="24"></lme-icon>
                <span class="api-delete-modal__title">APIキーを削除します</span>
            </div>
            {{-- [NEW-698] Nut chi co icon can aria-label rieng: <lme-icon> la trang tri
                 (aria-hidden) nen khong dong gop ten cho nut. Nut nay con la noi tieu diem
                 dap xuong khi modal mo (NEW-316) nen cang phai co ten. --}}
            <lme-button-ghost type="secondary" size="sm" icon aria-label="閉じる" @click="closeDeleteModal">
                <lme-icon file_name="close-outlined"></lme-icon>
            </lme-button-ghost>
        </div>

        {{-- Ô tên key đích (nền xám) — E-046, E-061 --}}
        <div class="api-delete-modal__target">@{{ deleteTarget.name }}</div>

        <p class="api-delete-modal__warning">削除するとこのキーを使用している連携はすぐに停止し、元に戻すことはできません。本当に削除しますか？</p>

        {{-- Xoá thất bại (500, mất mạng…): modal KHÔNG đóng và lỗi hiện ngay tại đây.
             Bản trước đóng modal rồi mới toast 3 giây ⇒ người dùng gần như không thấy thông báo
             nào mà lại tưởng đã xoá xong. Xem failDelete() trong index.js. --}}
        <lme-alert
            v-if="deleteError"
            v-model="showDeleteError"
            type="error"
            :message="deleteError">
        </lme-alert>

        <div class="api-modal-footer">
            <lme-button-flat type="primary" size="md" @click="closeDeleteModal">キャンセル</lme-button-flat>
            <lme-button-risk type="primary" size="md" :disabled="deleting" @click="confirmDelete">削除する</lme-button-risk>
        </div>
    </div>
</lme-modal>