{% extends "base.html" %}

{% block title %}{{ title }} - OptiWarm{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h1>Dashboard</h1>
        <p class="lead">Welcome to OptiWarm - Smart Heating Management Solution</p>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">System Status</h5>
            </div>
            <div class="card-body">
                <p>Quick overview of your heating system:</p>
                <ul>
                    <li>Active Boilers: <span class="badge bg-success">3</span></li>
                    <li>Zones: <span class="badge bg-primary">5</span></li>
                    <li>Current Average Temperature: <span class="badge bg-info">21.5°C</span></li>
                </ul>
                <a href="#" class="btn btn-primary">View Details</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Energy Consumption</h5>
            </div>
            <div class="card-body">
                <p>Current energy usage:</p>
                <div class="progress mb-3">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
                </div>
                <p>Compared to previous period: <span class="text-success">-10%</span></p>
                <a href="#" class="btn btn-primary">View Reports</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Recent Alerts</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Zone 2 Temperature Drop</h6>
                            <small>3 hrs ago</small>
                        </div>
                        <p class="mb-1">Temperature below threshold.</p>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">Boiler 1 Maintenance</h6>
                            <small>1 day ago</small>
                        </div>
                        <p class="mb-1">Regular maintenance scheduled.</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Weather Forecast</h5>
            </div>
            <div class="card-body">
                <p>Today: <strong>Partly Cloudy</strong> <span class="float-end">4°C / 12°C</span></p>
                <p>Tomorrow: <strong>Sunny</strong> <span class="float-end">5°C / 14°C</span></p>
                <p>Day After: <strong>Rain</strong> <span class="float-end">2°C / 8°C</span></p>
                <a href="#" class="btn btn-sm btn-outline-primary">Update Forecast</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('boilers.create') }}" class="btn btn-primary">Add New Boiler</a>
                    <a href="{{ url_for('zones.create') }}" class="btn btn-primary">Create Zone</a>
                    <a href="#" class="btn btn-outline-secondary">Run System Diagnostics</a>
                    <a href="#" class="btn btn-outline-secondary">Generate Reports</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}