<script setup lang="ts">
import KbxButton from '../components/KbxButton.vue'

withDefaults(defineProps<{ screenTitle?:string; screenId?:string; revealDetails?:boolean }>(),{revealDetails:false})
const emit=defineEmits<{ home:[]; menuSearch:[] }>()
</script>

<template>
  <section class="kbx-access-denied" role="alert" aria-labelledby="kbx-access-denied-title">
    <div class="kbx-access-denied__box">
      <strong id="kbx-access-denied-title">접근 권한이 없습니다.</strong>
      <p><template v-if="revealDetails"><b v-if="screenTitle">{{screenTitle}}</b><span v-if="screenId"> ({{screenId}})</span> </template>현재 사용자에게 이 업무 화면을 사용할 권한이 없습니다.</p>
      <p>메뉴 노출 여부와 실제 업무 권한은 분리되며, 서버에서도 동일 권한을 최종 검증해야 합니다.</p>
      <div class="kbx-access-denied__actions"><KbxButton label="홈으로 이동" variant="primary" @click="emit('home')" /><KbxButton label="다른 업무 찾기" @click="emit('menuSearch')" /></div>
    </div>
  </section>
</template>

<style scoped>
.kbx-access-denied{height:100%;min-height:var(--kbx-content-min-height);display:grid;place-items:center;padding:var(--kbx-space-6)}.kbx-access-denied__box{max-width:var(--kbx-access-max-width);border:var(--kbx-border-width) solid var(--kbx-color-border);border-left:var(--kbx-accent-border-width) solid var(--kbx-color-danger);padding:var(--kbx-space-5);background:var(--kbx-color-surface)}.kbx-access-denied strong{font-size:var(--kbx-font-lg)}.kbx-access-denied p{font-size:var(--kbx-font-sm);color:var(--kbx-color-text-muted);line-height:1.6}.kbx-access-denied__actions{display:flex;align-items:center;gap:var(--kbx-space-2);margin-top:var(--kbx-space-3)}
</style>
