{% extends 'base.html' %}

{% load humanize %}

{% load mi_filtro %}

{% block menuapp %}

{% include 'repostajes/_menu-repostajes.html' %}

{% endblock menuapp %}

{% block content %}
		    <div class="container-xl">
			    <div class="row g-3 mb-4 align-items-center justify-content-between">
				    <div class="col-auto">
			            <h1 class="app-page-title mb-0">Repostajes</h1>
				    </div>
			    </div><!--//row-->				
				<div class="col-auto">
					<div class="page-utilities">
					    <div class="row g-4 justify-content-start justify-content-md-end align-items-center">
						    <div class="col-auto">
							   <a class="btn app-btn-primary" href="{% url 'repostajes:nuevo_repostaje' %}">Añadir repostaje</a>
						    </div>
					    </div><!--//row-->
				    </div><!--//table-utilities-->
			    </div><!--//col-auto-->


				<div class="app-card app-card-notification shadow-sm mb-4">
					<div class="app-card-body p-4">
									<table class="table app-table-hover mb-0 text-left">
										<thead>
											<tr>
												<th class="cell">Fecha</th>
												<th class="cell">Vehículo</th>
												<th class="cell">Kilómetros</th>
												<th class="cell">Litros</th>
												<th class="cell">Importe</th>
												<th class="cell">Descuento</th>
												<th class="cell">Precio por litro</th>
												<th class="cell">Kms recorridos</th>
												<th class="cell">Consumo/100 kms</th>
											</tr>
										</thead>
										{% for repostaje in repostajes %}

										<tbody>
											<tr>
												<td class="cell"><a href="{% url 'repostajes:detalle_repostaje' repostaje.id %}">{{ repostaje.fecha }}</a></td>
												<td class="cell"><a href="{% url 'repostajes:detalle_vehiculo' repostaje.vehiculo.id %}">{{ repostaje.vehiculo.matricula }}</a></td>
												<td class="text-end">{{ repostaje.kms | no_currency }}</td>
												<td class="text-end">{{ repostaje.litros | litros }}</td>
												<td class="text-end">{{ repostaje.importe | currency_euros }}</td>
												<td class="text-end">{{ repostaje.descuento | currency_euros  }}</td>
												<td class="text-end">{{ repostaje.precioxlitro | currency_euros  }}</td>
												<td class="text-end">{{ repostaje.kmsrecorridos | no_currency }}</td>
												<td class="text-end">{{ repostaje.consumo | litros}}</td>
											</tr>
										</tbody>
										{% endfor %}		
									</table>
				</div>
		    </div><!--//container-fluid-->
{% endblock %}