{% extends '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 }} — Fuel Summary</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 Fuel Entry</a>
        <a href="/details/{{ table_name }}" class="btn btn-info text-white">Consumption 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 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'] }}</p>
                </div>
                <div class="col-md-6">
                    <p><strong>End:</strong> {{ long_term_consumption['end'] }}</p>
                </div>
            </div>

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

        </div>
    </div>


    <!-- TABLE SECTION -->
    <h4 class="mb-3">Fuel Records (tabel_alimentari)</h4>
    <div class="table-responsive mb-5">
        <table class="table table-bordered table-hover table-striped">
            <thead class="table-light">
                <tr>
                    {% for colName in tabel_alimentari[0] %}
                        <th scope="col" style="cursor:pointer">{{ colName }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in tabel_alimentari[1:] %}
                <tr>
                    {% for col in row %}
                        <td>{{ col }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>


    <!-- TOTALS TABLE -->
    <h4 class="mb-3">Totals (tabel_totals)</h4>
    <div class="table-responsive mb-5">

        {% if tabel_totals %}
        <table class="table table-bordered table-hover table-striped">
            <thead class="table-light">
                <tr>
                    {% for colName in tabel_totals[0] %}
                        <th scope="col">{{ colName }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in tabel_totals[1:] %}
                <tr>
                    {% for col in row %}
                        <td>{{ col }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
            <div class="alert alert-info">No totals available.</div>
        {% endif %}

    </div>

    <!-- LAST RECORDS TABLE -->
    <h4 class="mb-3">Last Records</h4>
    <div class="table-responsive mb-5">
        <table class="table table-bordered table-hover table-striped">
            <thead class="table-light">
                <tr>
                    {% for colName in last_records[0] %}
                        <th scope="col">{{ colName }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in last_records[1:] %}
                <tr>
                    {% for col in row %}
                        <td>{{ col }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>

{% endblock %}