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

{% block top_actions %}
<a href="/config/meters/add" class="btn btn-primary btn-sm">Add Meter</a>
{% endblock %}

{% block content %}
<div class="restart-banner hidden" id="restart-banner">
    Pipeline restart required to apply changes.
    <button class="btn btn-primary btn-sm" onclick="restartPipeline()">Restart Now</button>
</div>

{% if meters %}
<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>ID</th>
                <th>Protocol</th>
                <th>Type</th>
                <th>Unit</th>
                <th>Multiplier</th>
                <th>Cost Tracking</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for meter in meters %}
            <tr>
                <td>{{ meter.name }}</td>
                <td><code>{{ meter.id }}</code></td>
                <td><span class="badge badge-protocol">{{ meter.protocol|upper }}</span></td>
                <td>{{ meter.device_class or '--' }}</td>
                <td>{{ meter.unit_of_measurement }}</td>
                <td>{{ meter.multiplier }}</td>
                <td>{% if meter.cost_factors %}<span class="badge badge-cost">{{ meter.cost_factors|length }} rate{{ 's' if meter.cost_factors|length != 1 }}</span>{% else %}--{% endif %}</td>
                <td class="actions-cell">
                    <a href="/config/meters/{{ meter.id }}/edit" class="btn btn-sm btn-secondary">Edit</a>
                    <a href="/calibration?meter={{ meter.id }}" class="btn btn-sm btn-secondary">Calibrate</a>
                    <button class="btn btn-sm btn-danger" onclick="deleteMeter({{ meter.id }}, '{{ meter.name }}')">Delete</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="empty-state">
    <p>No meters configured.</p>
    <p><a href="/config/meters/add" class="btn btn-primary">Add Meter</a> or <a href="/discovery" class="btn btn-secondary">Run Discovery</a></p>
</div>
{% endif %}

<script>
async function deleteMeter(id, name) {
    if (!confirm('Delete meter "' + name + '" (ID: ' + id + ')?')) return;
    const resp = await fetch('/api/config/meters/' + id, {method: 'DELETE'});
    const data = await resp.json();
    if (data.ok) {
        showToast('Meter deleted', 'success');
        setTimeout(() => location.reload(), 500);
    } else {
        showToast(data.error || 'Delete failed', 'error');
    }
}
</script>
{% endblock %}