<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Security System" title="Permissions, IP controls and audit logs" subtitle="Role permissions, dynamic access control, IP whitelist, router whitelist, 2FA, and login activity." action="Configure 2FA" />
    <div class="grid gap-6 xl:grid-cols-2">
      <DataPanel title="Security Controls" :items="controls" />
      <DataPanel title="Login & Audit Activity" :items="activity" />
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import DataPanel from '../components/DataPanel.vue';
import ModuleHeader from '../components/ModuleHeader.vue';
import { getJson } from '../services/api.js';

const controls = ref([]);
const activity = ref([]);

onMounted(async () => {
  const data = await getJson('/security');
  controls.value = data.controls;
  activity.value = data.activity;
});
</script>
