{{--
    [#40041] SCR-02 — 「APIキーを発行」 modal phát hành.
    Mở modal luôn reset form về mặc định (キー名 rỗng, 全権限, 30日) và xoá lỗi cũ (FN-01).
--}}
<lme-modal v-model="showIssueModal" title="APIキーを発行" :width="560">
    <div class="api-modal-body">
        {{-- 「キー名」 — bắt buộc, counter n/50 (E-036) --}}
        <lme-input
            v-model="form.name"
            label="キー名"
            required
            :vertical="true"
            size="lg"
            placeholder="例）予約システム連携"
            :max-count="50"
            width="475px"
            :error-message="errors.name">
        </lme-input>

        {{-- 「権限」 — 2 lựa chọn, mặc định 全権限 (E-037) --}}
        <div class="api-form-field">
            <div class="api-form-label">権限<span class="api-form-required">*</span></div>
            <lme-radio-group
                v-model="form.scope"
                :options="scopeOptions"
                type="button"
                size="large"
                name="api-key-scope">
            </lme-radio-group>
            <p class="api-form-help">@{{ scopeHelpText }}</p>
        </div>

        {{-- 「有効期限」 — 4 mức tương đối, KHÔNG có date picker (BR-07 / D-02) --}}
        <div class="api-form-field">
            <lme-select
                v-model="form.expiry_preset"
                label="有効期限"
                required
                direction="vertical"
                :options="expiryOptions"
                width="240px"
                size="lg">
            </lme-select>
            <p class="api-form-help">@{{ expiryHelpText }}</p>
        </div>

        {{-- Lỗi cấp modal: ngưỡng 10 key (BR-03) — không gắn được vào ô 「キー名」 --}}
        <lme-alert
            v-if="issueGlobalError"
            v-model="showIssueGlobalError"
            type="error"
            :message="issueGlobalError">
        </lme-alert>

        <div class="api-modal-footer">
            <lme-button-flat type="primary" size="md" @click="closeIssueModal">キャンセル</lme-button-flat>
            {{-- Nút enable ngay cả khi form trống (E-042); chỉ disable khi đang gửi để chống double submit --}}
            <lme-button-default type="primary" size="md" :disabled="submitting" @click="submitIssue">発行する</lme-button-default>
        </div>
    </div>
</lme-modal>