{{--
    [#40041] SCR-05 — 「操作履歴」 drawer.
    3 loại bản ghi: 発行 / 削除 / 無効 (BR-19). Bản ghi loại 無効 do job Spring Boot
    `ApiKeyExpireTask` ghi (§4.1 — ngoài phạm vi web), màn này chỉ hiển thị.
--}}
{{--
    Nội dung drawer PHẢI bọc trong `.lme-drawer-content` (đúng như design): `lme-drawer` chỉ
    render `.lme-drawer-content-container`, còn padding 16px / font-size 14px / font-weight 400
    nằm ở rule `.lme-drawer-content-container .lme-drawer-content` (drawer.css). Không bọc thì
    chữ trong drawer rơi về `font-weight: 300` của `body` — nhạt hơn design.
--}}
<lme-drawer v-model="showHistoryDrawer" width="520px" title="操作履歴">
    <div class="lme-drawer-content">
        {{-- Hàng lọc + bộ đếm sau lọc (E-049, E-062, BR-17) --}}
        <div class="api-history__filter">
            <lme-select
                v-model="historyFilter"
                :options="historyFilterOptions"
                width="200px"
                size="md"
                @change="onHistoryFilterChange">
            </lme-select>
            <span class="api-history__count">@{{ logPagination.total_items }} 件</span>
        </div>
    </div>

    <hr>

    <div class="lme-drawer-content">
        {{-- Empty — lọc không ra kết quả (E-053) --}}
        <lme-empty-view
            v-if="!loadingLogs && logs.length === 0"
            type="no-results"
            title="該当する履歴がありません"
            description="絞り込み条件を変えてお試しください">
        </lme-empty-view>

        {{-- Timeline mới nhất ở trên (E-051, E-062) --}}
        <div v-else class="api-history__list">
            <lme-history-card
                v-for="(log, index) in logs"
                :key="log.id"
                :status="historyStatus(log.action)"
                :time="log.created_at"
                :show-line="index < logs.length - 1"
                width="100%">
                <template #icon>
                    <lme-icon :file_name="historyIcon(log.action)" color="#fff"></lme-icon>
                </template>
                <template #title>
                    <div class="api-history__title">
                        <lme-tag :type="historyTagType(log.action)" :text="log.action_label" size="sm"></lme-tag>
                        {{-- Tên key dài phải cắt 1 dòng + 「…」, tên đầy đủ xem ở tooltip — cùng cách
                             đã dùng cho cột 発行者 ở SCR-01. Trước đây span để `word-break: break-all`
                             nên tên dài xuống 3-4 dòng, tràn khỏi `.lme-history-card__title-row`
                             (cao cố định 24px) và bóp cả thẻ tag bên cạnh khiến 「削除」 cụt còn 「削」. --}}
                        <lme-tooltip :content="log.key_name" position="top" class_name="api-history__key-tip">
                            <span class="api-history__key-name lme-truncate">@{{ log.key_name }}</span>
                        </lme-tooltip>
                    </div>
                </template>
                <template #content>
                    <div class="api-history__content">
                        <p style="font-size: 14px">@{{ log.detail }}</p>
                        <p class="api-history__operator">操作者：@{{ log.operator_name }}</p>
                    </div>
                </template>
            </lme-history-card>

            {{-- Drawer không có phân trang trong thiết kế; EP-S05 có phân trang ⇒ tải thêm theo trang --}}
            <div v-if="logPagination.has_next" class="api-history__more">
                <lme-button-flat type="primary" size="md" :disabled="loadingLogs" @click="loadMoreLogs">もっと見る</lme-button-flat>
            </div>
        </div>
    </div>
</lme-drawer>