<script setup>
import { computed } from 'vue';
import { Card, Badge } from '@/components/ui';

const props = defineProps({
  ev: { type: Object, required: true }
});

const attrs = computed(() => props.ev.attrs || {});
const userName = computed(() => attrs.value['User-Name'] || attrs.value['User-Name*0']);
</script>

<template>
  <Card class="p-3">
    <div class="flex flex-wrap items-center gap-2">
      <b>{{ ev.type }}</b>
      <Badge variant="secondary">{{ ev.ts }}</Badge>
      <Badge v-if="ev.decision">Decision: {{ ev.decision }}</Badge>
      <Badge v-if="ev.error" variant="danger">Error</Badge>
    </div>

    <div class="text-muted text-xs mt-1.5">
      <span v-if="userName">User: {{ userName }}</span>
      <span v-if="attrs['NAS-IP-Address']"> — NAS: {{ attrs['NAS-IP-Address'] }}</span>
      <span v-if="attrs['Calling-Station-Id']"> — STA: {{ attrs['Calling-Station-Id'] }}</span>
    </div>
  </Card>
</template>
