{% extends "base.html" %}

{% block title %}WORKERS - BTC-OS Dashboard{% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/css/workers.css">
<link rel="stylesheet" href="/static/css/theme-toggle.css">
{% endblock %}

{% block header %}WORKERS OVERVIEW{% endblock %}

{% block workers_active %}active{% endblock %}

{% block content %}
<!-- Summary statistics -->
<div class="row mb-3">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">MINER SUMMARY</div>
            <div class="card-body">
                <div class="summary-stats">
                    <div class="summary-stat">
                        <div class="worker-ring" style="--online-percent: {{ workers_online / workers_total if workers_total > 0 else 0 }}">
                            <div class="worker-ring-inner">
                                <span id="workers-count">{{ workers_total }}</span>
                            </div>
                        </div>
                        <div class="summary-stat-label">WORKERS</div>
                        <div>
                            <span class="green-glow" id="workers-online">{{ workers_online }}</span> /
                            <span class="red-glow" id="workers-offline">{{ workers_offline }}</span>
                        </div>
                    </div>

                    <div class="summary-stat">
                        <div class="summary-stat-value white-glow" id="total-hashrate">
                            {% if total_hashrate is defined %}
                            {{ "%.1f"|format(total_hashrate) }} {{ hashrate_unit }}
                            {% else %}
                            N/A
                            {% endif %}
                        </div>
                        <div class="summary-stat-label">TOTAL HASHRATE</div>
                        <div class="mini-chart">
                            <canvas id="total-hashrate-chart"></canvas>
                        </div>
                    </div>

                    <div class="summary-stat">
                        <div class="summary-stat-value green-glow" id="total-earnings">
                            {% if total_earnings is defined %}
                            {{ "%.8f"|format(total_earnings) }} BTC
                            {% else %}
                            N/A
                            {% endif %}
                        </div>
                        <div class="summary-stat-label">UNPAID EARNINGS</div>
                    </div>

                    <div class="summary-stat">
                        <div class="summary-stat-value yellow-glow" id="daily-sats">
                            {% if daily_sats is defined %}
                            {{ daily_sats|commafy }} SATS
                            {% else %}
                            N/A
                            {% endif %}
                        </div>
                        <div class="summary-stat-label">DAILY SATS</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Controls bar -->
<div class="controls-bar">
    <input type="text" class="search-box" id="worker-search" placeholder="Search workers...">
    <div class="filter-buttons">
        <button class="filter-button active" data-filter="all">ALL WORKERS</button>
        <button class="filter-button" data-filter="online">ONLINE</button>
        <button class="filter-button" data-filter="offline">OFFLINE</button>
    </div>
</div>

<!-- Workers grid -->
<div class="worker-grid" id="worker-grid">
    <!-- Worker cards will be generated here via JavaScript -->
    <div id="loader" class="text-center p-5" style="display:none;">
        <i class="fas fa-spinner fa-spin"></i> Loading worker data...
    </div>
</div>
{% endblock %}

{% block javascript %}
<script src="/static/js/workers.js"></script>
{% endblock %}