{% extends "modern/base.html" %}

{% block title %}Dashboard - Zebra Day{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Zebra Day Dashboard</h1>
    <p class="page-subtitle">TapDB-backed printer fleet state, API-driven operations, and service observability.</p>
</div>

<div class="grid grid-4 mb-xl">
    <a href="/printers" class="stat-card stat-card-clickable">
        <div class="card-icon primary"><i class="fas fa-print"></i></div>
        <div>
            <div class="stat-value">{{ stats.total_printers | default(0) }}</div>
            <div class="stat-label">Printers</div>
        </div>
    </a>
    <a href="/printers" class="stat-card stat-card-clickable">
        <div class="card-icon info"><i class="fas fa-building"></i></div>
        <div>
            <div class="stat-value">{{ stats.total_labs | default(0) }}</div>
            <div class="stat-label">Labs</div>
        </div>
    </a>
    <a href="/templates" class="stat-card stat-card-clickable">
        <div class="card-icon warning"><i class="fas fa-file-code"></i></div>
        <div>
            <div class="stat-value">{{ stats.total_templates | default(0) }}</div>
            <div class="stat-label">Templates</div>
        </div>
    </a>
    <a href="/admin" class="stat-card stat-card-clickable">
        <div class="card-icon success"><i class="fas fa-shield-halved"></i></div>
        <div>
            <div class="stat-value">{{ auth_mode | upper }}</div>
            <div class="stat-label">Auth Mode</div>
        </div>
    </a>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Service Actions</h3>
        </div>
        <div class="quick-actions">
            <a href="/print" class="action-card">
                <i class="fas fa-tag"></i>
                <div>
                    <strong>Print Label</strong>
                    <small class="text-muted d-block">Resolve printer defaults and submit a job</small>
                </div>
            </a>
            <a href="/printers" class="action-card">
                <i class="fas fa-wifi"></i>
                <div>
                    <strong>Discover Printers</strong>
                    <small class="text-muted d-block">Scan a subnet and record draft printers in TapDB</small>
                </div>
            </a>
            <a href="/templates" class="action-card">
                <i class="fas fa-layer-group"></i>
                <div>
                    <strong>Manage Templates</strong>
                    <small class="text-muted d-block">Edit shared TapDB label templates</small>
                </div>
            </a>
            <a href="/admin" class="action-card">
                <i class="fas fa-wave-square"></i>
                <div>
                    <strong>Observability</strong>
                    <small class="text-muted d-block">Health, auth, and runtime inspection</small>
                </div>
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Labs</h3>
            <a href="/printers" class="btn btn-outline btn-sm">Open Fleet</a>
        </div>
        {% if labs_summary %}
        <div class="table-container" style="box-shadow:none;">
            <table class="table">
                <thead>
                    <tr>
                        <th>Lab</th>
                        <th>Printers</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in labs_summary %}
                    <tr>
                        <td>
                            <strong>{{ entry.display_name }}</strong>
                            <br><small class="text-muted">{{ entry.lab }}</small>
                        </td>
                        <td>{{ entry.printer_count }}</td>
                        <td><a class="btn btn-sm btn-outline" href="/printers/{{ entry.lab }}">View</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">
            <i class="fas fa-building"></i>
            <p>No labs are stored in TapDB yet.</p>
            <a href="/printers" class="btn btn-primary">Open Fleet</a>
        </div>
        {% endif %}
    </div>
</div>

<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">API Surfaces</h3>
    </div>
    <div class="grid grid-3">
        <a href="/docs" class="action-card" target="_blank">
            <i class="fas fa-book-open"></i>
            <div>
                <strong>Swagger UI</strong>
                <small class="text-muted d-block">Interactive route explorer</small>
            </div>
        </a>
        <a href="/redoc" class="action-card" target="_blank">
            <i class="fas fa-file-lines"></i>
            <div>
                <strong>ReDoc</strong>
                <small class="text-muted d-block">Read-only contract view</small>
            </div>
        </a>
        <a href="/api/v1/config" class="action-card" target="_blank">
            <i class="fas fa-sliders"></i>
            <div>
                <strong>Runtime Config</strong>
                <small class="text-muted d-block">Resolved deployment and TapDB settings</small>
            </div>
        </a>
    </div>
</div>
{% endblock %}