{% extends "base.html" %}

{% block title %}Hands — Timmy Time{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 mb-0">Hands</h1>
      <p class="text-muted small mb-0">Autonomous scheduled agents</p>
    </div>
    <div class="d-flex gap-2">
    </div>
  </div>

  <!-- Main Content Grid -->
  <div class="row g-4">
    <!-- Left Column: Hands List -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-secondary d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Active Hands</h5>
          <span class="badge bg-secondary">Idle</span>
        </div>
        <div class="card-body p-0">
          <div id="hands-container">
            <div class="text-center py-5 text-muted">
              <p class="mb-1">No hands are currently active.</p>
              <small>Configure hands in the Marketplace to get started.</small>
            </div>
          </div>
        </div>
      </div>

      <!-- Executions -->
      <div class="card border-0 shadow-sm mt-4">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">Recent Executions</h5>
        </div>
        <div class="card-body p-0">
          <div id="executions-container">
            <div class="text-center py-4 text-muted">
              <small>No recent executions.</small>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Column: Approvals & Info -->
    <div class="col-lg-4">
      <!-- Pending Approvals -->
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-transparent border-secondary d-flex justify-content-between align-items-center">
          <h5 class="mb-0">Pending Approvals</h5>
          <span class="badge bg-warning text-dark" id="approval-count">0</span>
        </div>
        <div class="card-body p-0">
          <div id="approvals-container">
            <div class="text-center py-3 text-muted">
              <small>No pending approvals.</small>
            </div>
          </div>
        </div>
      </div>

      <!-- What are Hands -->
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent border-secondary">
          <h5 class="mb-0">What are Hands?</h5>
        </div>
        <div class="card-body">
          <p class="small mb-2">Hands are autonomous agents that run on schedules:</p>
          <ul class="list-unstyled small mb-0">
            <li class="mb-1">🔮 <strong>Oracle</strong> — Bitcoin intelligence</li>
            <li class="mb-1">🔍 <strong>Scout</strong> — OSINT monitoring</li>
            <li class="mb-1">✍️ <strong>Scribe</strong> — Content production</li>
            <li class="mb-1">💰 <strong>Ledger</strong> — Treasury tracking</li>
            <li class="mb-1">🔧 <strong>Forge</strong> — Model management</li>
            <li class="mb-1">🎨 <strong>Weaver</strong> — Creative pipeline</li>
            <li class="mb-1">🛡️ <strong>Sentinel</strong> — System health</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}