{% extends 'base.html' %}

{% block content %}

<div class="container-xl">
			    
    <h1 class="app-page-title">Resumen</h1>
    
    <nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4">
        <a class="flex-sm-fill text-sm-center nav-link active" id="orders-all-tab" data-bs-toggle="tab" href="#orders-all" role="tab" aria-controls="orders-all" aria-selected="true">Todos</a>
        {% for cadacoche in vehiculos %}

        <a class="flex-sm-fill text-sm-center nav-link"  id="orders-paid-tab" data-bs-toggle="tab" href="#{{ cadacoche.matricula }}" role="tab" aria-controls="orders-paid" aria-selected="false">{{ cadacoche.marca }}</a>
        
        {% endfor %}	


        <a class="flex-sm-fill text-sm-center nav-link" id="orders-pending-tab" data-bs-toggle="tab" href="#vehiculos" role="tab" aria-controls="orders-pending" aria-selected="false">Vehículos</a>
    </nav>
    
    
    <div class="tab-content" id="orders-table-tab-content">
        <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
            <div class="app-card app-card-orders-table shadow-sm mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                       {% include '_tablarepostajes.html' %}
                    </div><!--//table-responsive-->  
                </div><!--//app-card-body-->		
            </div><!--//app-card-->						
        </div><!--//tab-pane-->
              
        {% for vehiculo in vehiculos %}

        <div class="tab-pane fade" id="{{ vehiculo.matricula }}" role="tabpanel" aria-labelledby="orders-paid-tab">
            <div class="app-card app-card-orders-table mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        {% include '_tablarepostajescompleta.html' %}
                    </div><!--//table-responsive-->
                </div><!--//app-card-body-->		
            </div><!--//app-card-->
        </div><!--//tab-pane-->
        {% endfor %}	

        
        <div class="tab-pane fade" id="vehiculos" role="tabpanel" aria-labelledby="orders-pending-tab">
            <div class="app-card app-card-orders-table mb-5">
                <div class="app-card-body">
                    <div class="table-responsive">
                        <table class="table mb-0 text-left">
                            <thead>
                                <tr>
                                    <th class="cell">#</th>
                                    <th class="cell">Marca</th>
                                    <th class="cell">Modelo</th>
                                    <th class="cell">Matricula</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in vehiculos %}
                                <tr>
                                <td class="cell">{{ row.id }}</td>
                                <td class="cell">{{ row.marca }}</td>
                                <td class="cell">{{ row.modelo }}</td>
                                <td class="cell">{{ row.matricula }}</td>
                                </tr>
                                {% endfor %}	

                            </tbody>
                        </table>
                    </div><!--//table-responsive-->
                </div><!--//app-card-body-->		
            </div><!--//app-card-->
        </div><!--//tab-pane-->
    </div><!--//tab-content-->
    


</div><!--//container-fluid-->

{% endblock %}