{{--
    [#40041] SCR-03 — 「APIキーを発行しました」 modal kết quả.
    Full key hiển thị plaintext tại đây và vẫn xem lại được bằng icon 👁 ở SCR-01 (BR-14 / D-05 = A).
--}}
<lme-modal v-model="showIssuedModal" title="APIキーを発行しました" :width="560">
    <div class="api-modal-body">
        {{-- Alert info đóng được trong phiên; hiện lại mỗi lần phát hành (E-044) --}}
        <lme-alert
            v-model="showIssuedAlert"
            type="info"
            width="100%"
            message="このキーは一覧の目のアイコンからいつでも再表示できます。第三者への共有は行わないでください。">
        </lme-alert>

        {{-- Ô key: full key, không che (E-045) --}}
        <div class="api-issued-key">
            <span class="api-issued-key__value">@{{ issued.api_key }}</span>
            <lme-button-flat size="md" @click="copyIssuedKey">
                <lme-icon file_name="file-copy-outlined"></lme-icon>
                コピー
            </lme-button-flat>
        </div>

        {{-- Bảng tóm tắt 3 dòng — dựng từ response server, KHÔNG dựng lại từ form (tránh lệch múi giờ) --}}
        <div class="lme-table-representation api-issued-summary">
            <table class="lme-table-representation-table">
                <tbody>
                    <tr>
                        <th style="color: #1F1F1F">キー名</th>
                        <td style="color: #1F1F1F">@{{ issued.name }}</td>
                    </tr>
                    <tr>
                        <th style="color: #1F1F1F">権限</th>
                        <td style="color: #1F1F1F">@{{ issued.scope_label }}</td>
                    </tr>
                    <tr>
                        <th style="color: #1F1F1F">有効期限</th>
                        <td style="color: #1F1F1F">@{{ issued.expires_at ? issued.expires_at : '無期限' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="api-modal-footer">
            <lme-button-default type="primary" size="md" @click="closeIssuedModal">閉じる</lme-button-default>
        </div>
    </div>
</lme-modal>