{{define "content"}}
<div class="space-y-6">
  <div>
    <h1 class="text-3xl font-bold text-white mb-2">Dashboard</h1>
    <p class="text-slate-400">Welcome to PlutoOS Storage Controller</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Storage Overview Card -->
    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Storage</h2>
        <div class="h-10 w-10 rounded-lg bg-slate-700 flex items-center justify-center">
          <svg class="w-6 h-6 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
          </svg>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mb-1">--</p>
      <p class="text-sm text-slate-400">Total Capacity</p>
    </div>

    <!-- Shares Card -->
    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">Shares</h2>
        <div class="h-10 w-10 rounded-lg bg-slate-700 flex items-center justify-center">
          <svg class="w-6 h-6 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mb-1">--</p>
      <p class="text-sm text-slate-400">Active Shares</p>
    </div>

    <!-- iSCSI Targets Card -->
    <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-white">iSCSI</h2>
        <div class="h-10 w-10 rounded-lg bg-slate-700 flex items-center justify-center">
          <svg class="w-6 h-6 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
      <p class="text-2xl font-bold text-white mb-1">--</p>
      <p class="text-sm text-slate-400">Active Targets</p>
    </div>
  </div>

  <!-- System Status -->
  <div class="bg-slate-800 rounded-lg p-6 border border-slate-700">
    <h2 class="text-lg font-semibold text-white mb-4">System Status</h2>
    <div class="space-y-3">
      <div class="flex items-center justify-between">
        <span class="text-slate-300">ZFS Status</span>
        <span class="px-3 py-1 rounded-full text-xs font-medium bg-slate-700 text-slate-300">Initializing</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-slate-300">Storage Engine</span>
        <span class="px-3 py-1 rounded-full text-xs font-medium bg-slate-700 text-slate-300">Not Configured</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-slate-300">API Status</span>
        <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900 text-green-300">Online</span>
      </div>
    </div>
  </div>
</div>
{{end}}

{{define "dashboard.html"}}
{{template "base" .}}
{{end}}