{% extends "base.html" %}
{% block title %}Dashboard - HAMeter{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block top_actions %}
<button class="btn btn-secondary btn-sm" onclick="restartPipeline()">Restart Pipeline</button>
{% endblock %}

{% block content %}
<div class="dashboard">
    {% if meters %}
    <div class="meter-grid" id="meter-grid">
        {% for meter in meters %}
        <div class="meter-card" id="meter-card-{{ meter.id }}" data-meter-id="{{ meter.id }}">
            <div class="meter-card-header">
                <h3>{{ meter.name }}</h3>
                <span class="badge badge-protocol">{{ meter.protocol|upper }}</span>
            </div>
            <div class="meter-card-body">
                <div class="meter-reading" id="reading-{{ meter.id }}">
                    <span class="reading-value">--</span>
                    <span class="reading-unit">{{ meter.unit_of_measurement }}</span>
                </div>
                {% if meter.cost_factors %}
                <div class="meter-cost" id="cost-section-{{ meter.id }}">
                    <div class="cost-value" id="cost-{{ meter.id }}">$--</div>
                    <div class="cost-label">Estimated Cost</div>
                    <div class="cost-details">
                        <div class="detail-row">
                            <span class="detail-label">Billing Start</span>
                            <span class="detail-value" id="billing-start-{{ meter.id }}">--</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">Fixed Charges</span>
                            <span class="detail-value" id="fixed-charges-{{ meter.id }}">$0.00</span>
                        </div>
                    </div>
                    <div class="cost-actions">
                        <button class="btn btn-secondary btn-sm" onclick="addFixedCharges({{ meter.id }})">Add Fixed Charges</button>
                        <button class="btn btn-secondary btn-sm" onclick="resetBillingPeriod({{ meter.id }})">Reset Period</button>
                    </div>
                </div>
                {% endif %}
                <div class="meter-details">
                    <div class="detail-row">
                        <span class="detail-label">Raw Reading</span>
                        <span class="detail-value" id="raw-{{ meter.id }}">--</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Last Seen</span>
                        <span class="detail-value" id="lastseen-{{ meter.id }}">--</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Readings</span>
                        <span class="detail-value" id="count-{{ meter.id }}">0</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Meter ID</span>
                        <span class="detail-value">{{ meter.id }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Multiplier</span>
                        <span class="detail-value">{{ meter.multiplier }}</span>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>No meters configured.</p>
        <p><a href="/discovery" class="btn btn-primary">Run Discovery</a> or <a href="/config/meters/add" class="btn btn-secondary">Add Meter Manually</a></p>
    </div>
    {% endif %}
</div>
{% endblock %}