<template>
  <div class="card glass metrics">
    <div class="panel-title">
      <h2>Live Metrics</h2>
      <span class="pill mono">metrics.bstein.dev</span>
    </div>
    <p>{{ metrics.description }}</p>
    <div class="metrics-body">
      <iframe
        :src="metrics.dashboard"
        title="Atlas platform metrics"
        loading="lazy"
        allowfullscreen
      ></iframe>
      <div class="metrics-notes">
        <div class="label">Highlights</div>
        <ul>
          <li>Atlas scraping for cluster + service SLOs.</li>
          <li>Public dashboards summarize health and operations without exposing member-only details.</li>
          <li>Grafana panels can be embedded into member tools where safe.</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  metrics: {
    type: Object,
    default: () => ({ dashboard: "https://metrics.bstein.dev", description: "" }),
  },
});
</script>

<style scoped>
.metrics iframe {
  width: 100%;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: #0b1228;
}

.metrics-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.metrics-notes {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

ul {
  color: var(--text-muted);
  padding-left: 16px;
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .metrics-body {
    grid-template-columns: 1fr;
  }
}
</style>
