<script setup lang="ts">
import PageHeader from "../components/PageHeader.vue";
import { connectionState, wsUrl } from "../realtime";
</script>

<template>
  <PageHeader title="Dashboard" description="Übersicht über Backend-Verbindung und aktuelle Vorgänge." />
  <section class="panel compact">
    <div class="split-row">
      <div>
        <h2>Live-Verbindung</h2>
        <p class="muted">{{ connectionState.status }}</p>
      </div>
      <code>{{ wsUrl }}</code>
    </div>
  </section>
  <section class="panel">
    <div class="section-title">
      <h2>Aktuelle Datensätze</h2>
      <span>{{ connectionState.records.length }}</span>
    </div>
    <p v-if="connectionState.records.length === 0" class="empty">Keine Datensätze vorhanden.</p>
    <div v-else class="data-table two-cols">
      <div class="table-head">Titel</div>
      <div class="table-head">Aktualisiert</div>
      <template v-for="record in connectionState.records" :key="record.id">
        <div>{{ record.title }}</div>
        <time>{{ new Date(record.updated_at).toLocaleString("de-DE") }}</time>
      </template>
    </div>
  </section>
</template>
