{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-white border-bottom border-secondary pb-2">Übersicht</h2>
        </div>
    </div>

    <!-- Top Stats Cards -->
    <div class="row mb-4 g-3">
        <div class="col-md-2">
             <div class="card bg-dark border-secondary h-100">
                <div class="card-header border-secondary">Devices</div>
                <div class="card-body">
                    <h2 class="card-title display-6 fw-bold text-white" id="stat-devices">0</h2>
                    <p class="card-text text-muted">Active</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-bg-primary h-100">
                <div class="card-header">Hashrate (5s)</div>
                <div class="card-body">
                    <h2 class="card-title display-6 fw-bold" id="stat-mhs">0.00</h2>
                    <p class="card-text">MH/s</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-bg-success h-100">
                <div class="card-header">Accepted Shares</div>
                <div class="card-body">
                    <h2 class="card-title display-6 fw-bold" id="stat-accepted">0</h2>
                    <p class="card-text">Shares</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-bg-danger h-100">
                <div class="card-header">HW Errors</div>
                <div class="card-body">
                    <h2 class="card-title display-6 fw-bold" id="stat-hw">0</h2>
                    <p class="card-text">Errors</p>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card text-bg-warning h-100 text-dark">
                <div class="card-header">Max Temp</div>
                <div class="card-body">
                    <h2 class="card-title display-6 fw-bold" id="stat-temp">0</h2>
                    <p class="card-text">°C</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4 g-3">
        <div class="col-lg-8">
            <div class="card bg-dark border-secondary h-100">
                <div class="card-header border-secondary">Hashrate History (Last Hour)</div>
                <div class="card-body">
                    <canvas id="hashrateChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card bg-dark border-secondary h-100">
                <div class="card-header border-secondary">Pool Status</div>
                <div class="card-body">
                    <div id="pool-list" class="list-group list-group-flush">
                        <!-- Pool items injected via JS -->
                        <div class="text-center text-muted">Lade Pools...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Device Details -->
    <div class="row g-3">
        <div class="col-12">
            <div class="card bg-dark border-secondary">
                <div class="card-header border-secondary">Gerätestatus</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-dark table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Enabled</th>
                                    <th>Status</th>
                                    <th>Temp (°C)</th>
                                    <th>MHS 5s</th>
                                    <th>MHS avg</th>
                                    <th>Accepted</th>
                                    <th>Rejected</th>
                                    <th>HW Errors</th>
                                </tr>
                            </thead>
                            <tbody id="devs-table-body">
                                <tr>
                                    <td colspan="10" class="text-center text-muted">Keine Geräte gefunden oder Verbindung getrennt...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}