<template>
  <Layout>
    <h2 class="page-title">Administrator Dashboard</h2>
    <p class="page-sub">Reference / master data overview.</p>

    <div class="cards section">
      <div class="card ok"><div class="num">{{ cards.activeUsers }}</div><div class="lbl">Active users</div></div>
      <div class="card"><div class="num">{{ cards.inactiveUsers }}</div><div class="lbl">Inactive users</div></div>
      <div class="card info"><div class="num">{{ cards.equipment }}</div><div class="lbl">Active equipment</div></div>
      <div class="card"><div class="num">{{ cards.inactiveEquipment }}</div><div class="lbl">Deactivated equipment</div></div>
      <div class="card info"><div class="num">{{ cards.checklists }}</div><div class="lbl">Active checklists</div></div>
      <div class="card"><div class="num">{{ cards.areas }}</div><div class="lbl">Inspection areas</div></div>
    </div>

    <div class="section panel">
      <div class="panel-head"><h3>Equipment by type</h3></div>
      <div style="padding:16px">
        <div v-for="(count, type) in equipmentByType" :key="type" class="bar-row">
          <div class="bar-label">{{ type }}</div>
          <div class="bar-track">
            <div class="bar-fill" :style="{ width: (count / Math.max(1, ...Object.values(equipmentByType))) * 100 + '%' }"></div>
          </div>
          <div class="bar-val">{{ count }}</div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from '../../Shared/Layout.vue'

defineProps({
  today: String,
  cards: Object,
  equipmentByType: Object,
})
</script>
