{% extends 'onlineanywhere_base.html' %}

{% block content %}

<div class="container mt-4">

    <!-- PAGE TITLE -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">{{ table_name }} — Consumption</h2>
    </div>

    <!-- NAVIGATION BUTTONS -->
    <div class="mb-4">
        <a href="/masina" class="btn btn-outline-secondary me-2">Home</a>
        <a href="/addalim/{{ table_name }}" class="btn btn-primary me-2">Add Entry</a>
        <a href="/details/{{ table_name }}" class="btn btn-info text-white">Details</a>
    </div>

    <!-- LONG TERM SUMMARY -->
    <div class="card shadow-sm mb-5">
        <div class="card-header bg-light">
            <h4 class="mb-0">Long-term Fuel Consumption</h4>
        </div>
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-6">
                    <p><strong>Start:</strong> {{ long_term_consumption['start_fuel'] }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>End:</strong> {{ long_term_consumption['end_fuel'] }}</p>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-4">
                    <p><strong>Total km:</strong> {{ long_term_consumption['km_fuel'] }}</p>
                </div>
                <div class="col-md-4">
                    <p><strong>Total liters:</strong> {{ long_term_consumption['liters_fuel'] }}</p>
                </div>
                <div class="col-md-4">
                    <p><strong>Average:</strong> {{ long_term_consumption['average_fuel'] }}</p>
                </div>
            </div>

        </div>
    </div>

    <div class="card shadow-sm mb-5">
        <div class="card-header bg-light">
            <h4 class="mb-0">Long-term Electric Consumption</h4>
        </div>
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-6">
                    <p><strong>Start:</strong> {{ long_term_consumption['start_electric'] }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>End:</strong> {{ long_term_consumption['end_electric'] }}</p>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-4">
                    <p><strong>Total km:</strong> {{ long_term_consumption['km_electric'] }}</p>
                </div>
                <div class="col-md-4">
                    <p><strong>Total kWh:</strong> {{ long_term_consumption['kWh_electric'] }}</p>
                </div>
                <div class="col-md-4">
                    <p><strong>Average:</strong> {{ long_term_consumption['average_electric'] }}</p>
                </div>
            </div>

        </div>
    </div>



</div>

{% endblock %}