{% extends 'base.html' %}

{% block content %}
<h1 class="text-2xl py-3 font-bold">All Vehicles</h1>
<table class="table-auto border w-full">
    <thead>
        <th class="p-2">Name</th>
        <th class="p-2">Make & Model</th>
        <th class="p-2">Registration</th>
        <th class="p-2">Owner</th>
        <th class="p-2">Status</th>
        <th class="p-2">VIN Number</th>
        <th class="p-2">Engine Number</th>
        <th class="p-2">Chassis Number</th>
        <th class="p-2">Links</th>
    </thead>
    <tbody>
    {% for object in object_list %}
        <tr>
            <th scope="row" class="p-2">{{ object.name }}</th>
            <td class="p-2">{{ object.model }}</td>
            <td class="bg-yellow-400 text-black font-black rounded text-xl px-2">{{ object.reg_number|slice:"4:" }} {{ object.reg_number|slice:":3" }}</td>
            <td class="p-2">{{ object.owner|default:"God" }}</td>
            <td class="p-2">{{ object.status }}</td>
            <td class="p-2">{{ object.vin_number|default:"Unknown" }}</td>
            <td class="p-2">{{ object.engine_number|default:"Unknown" }}</td>
            <td class="p-2">{{ object.chassis_number|default:"Unknown" }}</td>
            <td class="p-2"><a href="{% url 'vehicle_detail' object.pk %}" class="underline text-blue-100">Detail</a></td>
        </tr>
    {% empty %}
        <tr class="bg-yellow-400">
            <td span="10">Nothing found!</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
{% endblock %}