{% extends "base.html" %}

{% block title %}Dashboard - ECM Control{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h1>ECM Control Dashboard</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Quick Stats</h5>
            </div>
            <div class="card-body">
                <p><strong>Recipes:</strong> {{ recipes|length }}</p>
                <p><strong>Buttons:</strong> {{ buttons|length }}</p>
                <p><strong>Total Shots:</strong> {{ recent_shots|length }}</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Button Status</h5>
            </div>
            <div class="card-body">
                {% for button in buttons %}
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>{{ button.name }} (GPIO {{ button.gpio_pin }})</span>
                    <span class="badge bg-{{ 'success' if button.recipe_name else 'warning' }}">
                        {{ button.recipe_name or 'No Recipe' }}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>Recent Shots</h5>
            </div>
            <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                {% for shot in recent_shots %}
                <div class="mb-2">
                    <div><strong>{{ shot.button_name }}</strong> - {{ shot.recipe_name }}</div>
                    <div class="text-muted small">
                        {{ shot.start_time }} - 
                        <span class="badge bg-{{ 'success' if shot.status == 'completed' else 'warning' }}">
                            {{ shot.status }}
                        </span>
                    </div>
                    {% if shot.actual_grams %}
                    <div class="text-muted small">{{ shot.actual_grams }}g in {{ shot.actual_duration_seconds }}s</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}