{% 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">{{ car_name }} — Costs Summary</h2>
    </div>

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

    <h5 class="mb-3">Last data base update {{last_db_update}}</h5>

    <!-- TABLE SECTION -->
    <h4 class="mb-3">Fuel/Electric 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 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 per Year</h4>
    <div class="table-responsive mb-5">

        {% if tabel_totals is not none and tabel_totals.size > 0 %}
        <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 %}