{% extends "base.html" %}

{% block title %}BTC-OS Mining Dashboard v 0.3{% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/css/dashboard.css">
{% endblock %}

{% block dashboard_active %}active{% endblock %}

{% block content %}
<!-- Graph Container -->
<div id="graphContainer" class="mb-2">
    <canvas id="trendGraph" style="width: 100%; height: 100%; position: relative; z-index: 2;"></canvas>
</div>

<!-- Miner Status and Payout Info -->
<div class="row mb-2 equal-height">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Miner Status</div>
            <div class="card-body">
                <p>
                    <strong>Status:</strong>
                    <span id="miner_status" class="metric-value">
                        {% if metrics and metrics.workers_hashing and metrics.workers_hashing > 0 %}
                        <span class="status-green">ONLINE</span> <span class="online-dot"></span>
                        {% else %}
                        <span class="status-red">OFFLINE</span> <span class="offline-dot"></span>
                        {% endif %}
                    </span>
                </p>
                <p>
                    <strong>Workers Hashing:</strong>
                    <span id="workers_hashing" class="metric-value">{{ metrics.workers_hashing or 0 }}</span>
                    <span id="indicator_workers_hashing"></span>
                </p>
                <p>
                    <strong>Last Share:</strong>
                    <span id="last_share" class="metric-value">{{ metrics.total_last_share or "N/A" }}</span>
                </p>
                <p>
                    <strong>Blocks Found:</strong>
                    <span id="blocks_found" class="metric-value white">
                        {{ metrics.blocks_found if metrics and metrics.blocks_found else "0" }}
                    </span>
                    <span id="indicator_blocks_found"></span>
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card" id="payoutMiscCard">
            <div class="card-header">Payout Info</div>
            <div class="card-body">
                <p>
                    <strong>Unpaid Earnings:</strong>
                    <span id="unpaid_earnings" class="metric-value green">
                        {% if metrics and metrics.unpaid_earnings %}
                        {{ metrics.unpaid_earnings }} BTC
                        {% else %}
                        0 BTC
                        {% endif %}
                    </span>
                    <span id="indicator_unpaid_earnings"></span>
                </p>
                <p>
                    <strong>Last Block:</strong>
                    <span id="last_block_height" class="metric-value white">
                        {{ metrics.last_block_height|commafy if metrics and metrics.last_block_height else "N/A" }}
                    </span>
                    —
                    <span id="last_block_time" class="metric-value blue">
                        {{ metrics.last_block_time if metrics and metrics.last_block_time else "N/A" }}
                    </span>
                    —
                    <span class="green">
                        {% if metrics and metrics.last_block_earnings %}
                        +{{ metrics.last_block_earnings|int|commafy }} SATS
                        {% else %}
                        +0 SATS
                        {% endif %}
                    </span>
                    <span id="indicator_last_block"></span>
                </p>
                <p>
                    <strong>Est. Time to Payout:</strong>
                    <span id="est_time_to_payout" class="metric-value yellow">
                        {{ metrics.est_time_to_payout if metrics and metrics.est_time_to_payout else "N/A" }}
                    </span>
                    <span id="indicator_est_time_to_payout"></span>
                </p>
                <p>
                    <strong>Pool Fees:</strong>
                    <span id="pool_fees_percentage" class="metric-value">
                        {% if metrics and metrics.pool_fees_percentage is defined %}
                        {{ metrics.pool_fees_percentage }}%
                        {% if metrics.pool_fees_percentage >= 0.9 and metrics.pool_fees_percentage <= 1.3 %}
                        <span class="fee-star">★</span> <span class="datum-label">DATUM</span>
                        {% endif %}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_pool_fees_percentage"></span>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Pool Hashrates and Bitcoin Network Stats -->
<div class="row equal-height">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Pool Hashrates</div>
            <div class="card-body">
                <p>
                    <strong>Pool Total Hashrate:</strong>
                    <span id="pool_total_hashrate" class="metric-value white">
                        {% if metrics and metrics.pool_total_hashrate and metrics.pool_total_hashrate_unit %}
                        {{ metrics.pool_total_hashrate }} {{ metrics.pool_total_hashrate_unit[:-2]|upper ~ metrics.pool_total_hashrate_unit[-2:] }}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_pool_total_hashrate"></span>
                </p>
                <hr>
                <p>
                    <strong>24hr Avg Hashrate:</strong>
                    <span id="hashrate_24hr" class="metric-value white">
                        {% if metrics and metrics.hashrate_24hr %}
                        {{ metrics.hashrate_24hr }}
                        {% if metrics.hashrate_24hr_unit %}
                        {{ metrics.hashrate_24hr_unit[:-2]|upper ~ metrics.hashrate_24hr_unit[-2:] }}
                        {% else %}
                        TH/s
                        {% endif %}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_hashrate_24hr"></span>
                </p>
                <p>
                    <strong>3hr Avg Hashrate:</strong>
                    <span id="hashrate_3hr" class="metric-value white">
                        {% if metrics and metrics.hashrate_3hr %}
                        {{ metrics.hashrate_3hr }}
                        {% if metrics.hashrate_3hr_unit %}
                        {{ metrics.hashrate_3hr_unit[:-2]|upper ~ metrics.hashrate_3hr_unit[-2:] }}
                        {% else %}
                        TH/s
                        {% endif %}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_hashrate_3hr"></span>
                </p>
                <p>
                    <strong>10min Avg Hashrate:</strong>
                    <span id="hashrate_10min" class="metric-value white">
                        {% if metrics and metrics.hashrate_10min %}
                        {{ metrics.hashrate_10min }}
                        {% if metrics.hashrate_10min_unit %}
                        {{ metrics.hashrate_10min_unit[:-2]|upper ~ metrics.hashrate_10min_unit[-2:] }}
                        {% else %}
                        TH/s
                        {% endif %}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_hashrate_10min"></span>
                </p>
                <p>
                    <strong>60sec Avg Hashrate:</strong>
                    <span id="hashrate_60sec" class="metric-value white">
                        {% if metrics and metrics.hashrate_60sec %}
                        {{ metrics.hashrate_60sec }}
                        {% if metrics.hashrate_60sec_unit %}
                        {{ metrics.hashrate_60sec_unit[:-2]|upper ~ metrics.hashrate_60sec_unit[-2:] }}
                        {% else %}
                        TH/s
                        {% endif %}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_hashrate_60sec"></span>
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Network Stats</div>
            <div class="card-body">
                <p>
                    <strong>Block Number:</strong>
                    <span id="block_number" class="metric-value white">
                        {% if metrics and metrics.block_number %}
                        {{ metrics.block_number|commafy }}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_block_number"></span>
                </p>
                <p>
                    <strong>BTC Price:</strong>
                    <span id="btc_price" class="metric-value yellow">
                        {% if metrics and metrics.btc_price %}
                        ${{ "%.2f"|format(metrics.btc_price) }}
                        {% else %}
                        $0.00
                        {% endif %}
                    </span>
                    <span id="indicator_btc_price"></span>
                </p>
                <p>
                    <strong>Network Hashrate:</strong>
                    <span id="network_hashrate" class="metric-value white">
                        {% if metrics and metrics.network_hashrate %}
                        {{ metrics.network_hashrate|round|commafy }} EH/s
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_network_hashrate"></span>
                </p>
                <p>
                    <strong>Difficulty:</strong>
                    <span id="difficulty" class="metric-value white">
                        {% if metrics and metrics.difficulty %}
                        {{ metrics.difficulty|round|commafy }}
                        {% else %}
                        N/A
                        {% endif %}
                    </span>
                    <span id="indicator_difficulty"></span>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Satoshi and USD Metrics -->
<div class="row equal-height">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">SATOSHI EARNINGS</div>
            <div class="card-body">
                <p>
                    <strong>Daily Mined (Net):</strong>
                    <span id="daily_mined_sats" class="metric-value yellow">
                        {% if metrics and metrics.daily_mined_sats %}
                        {{ metrics.daily_mined_sats|commafy }} SATS
                        {% else %}
                        0 sats
                        {% endif %}
                    </span>
                    <span id="indicator_daily_mined_sats"></span>
                </p>
                <p>
                    <strong>Monthly Mined (Net):</strong>
                    <span id="monthly_mined_sats" class="metric-value yellow">
                        {% if metrics and metrics.monthly_mined_sats %}
                        {{ metrics.monthly_mined_sats|commafy }} SATS
                        {% else %}
                        0 sats
                        {% endif %}
                    </span>
                    <span id="indicator_monthly_mined_sats"></span>
                </p>
                <p>
                    <strong>Est. Earnings/Day:</strong>
                    <span id="estimated_earnings_per_day_sats" class="metric-value yellow">
                        {% if metrics and metrics.estimated_earnings_per_day_sats %}
                        {{ metrics.estimated_earnings_per_day_sats|commafy }} SATS
                        {% else %}
                        0 sats
                        {% endif %}
                    </span>
                    <span id="indicator_estimated_earnings_per_day_sats"></span>
                </p>
                <p>
                    <strong>Est. Earnings/Block:</strong>
                    <span id="estimated_earnings_next_block_sats" class="metric-value yellow">
                        {% if metrics and metrics.estimated_earnings_next_block_sats %}
                        {{ metrics.estimated_earnings_next_block_sats|commafy }} SATS
                        {% else %}
                        0 sats
                        {% endif %}
                    </span>
                    <span id="indicator_estimated_earnings_next_block_sats"></span>
                </p>
                <p>
                    <strong>Est. Rewards in Window:</strong>
                    <span id="estimated_rewards_in_window_sats" class="metric-value yellow">
                        {% if metrics and metrics.estimated_rewards_in_window_sats %}
                        {{ metrics.estimated_rewards_in_window_sats|commafy }} SATS
                        {% else %}
                        0 sats
                        {% endif %}
                    </span>
                    <span id="indicator_estimated_rewards_in_window_sats"></span>
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">USD EARNINGS</div>
            <div class="card-body">
                <p>
                    <strong>Daily Revenue:</strong>
                    <span id="daily_revenue" class="metric-value green">
                        {% if metrics and metrics.daily_revenue is defined and metrics.daily_revenue is not none %}
                        ${{ "%.2f"|format(metrics.daily_revenue) }}
                        {% else %}
                        $0.00
                        {% endif %}
                    </span>
                    <span id="indicator_daily_revenue"></span>
                </p>
                <p>
                    <strong>Daily Power Cost:</strong>
                    <span id="daily_power_cost" class="metric-value red">
                        {% if metrics and metrics.daily_power_cost is defined and metrics.daily_power_cost is not none %}
                        ${{ "%.2f"|format(metrics.daily_power_cost) }}
                        {% else %}
                        $0.00
                        {% endif %}
                    </span>
                    <span id="indicator_daily_power_cost"></span>
                </p>
                <p>
                    <strong>Daily Profit (USD):</strong>
                    <span id="daily_profit_usd" class="metric-value green">
                        {% if metrics and metrics.daily_profit_usd is defined and metrics.daily_profit_usd is not none %}
                        ${{ "%.2f"|format(metrics.daily_profit_usd) }}
                        {% else %}
                        $0.00
                        {% endif %}
                    </span>
                    <span id="indicator_daily_profit_usd"></span>
                </p>
                <p>
                    <strong>Monthly Profit (USD):</strong>
                    <span id="monthly_profit_usd" class="metric-value green">
                        {% if metrics and metrics.monthly_profit_usd is defined and metrics.monthly_profit_usd is not none %}
                        ${{ "%.2f"|format(metrics.monthly_profit_usd) }}
                        {% else %}
                        $0.00
                        {% endif %}
                    </span>
                    <span id="indicator_monthly_profit_usd"></span>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<!-- External JavaScript file with our application logic -->
<script src="/static/js/main.js"></script>
{% endblock %}