{% extends 'base.html' %}

{% block content %}
<h1 class="text-2xl">Vehicle: <span class="font-bold">{{ object }}</span></h1>
<div class="bg-yellow-400 text-black font-black rounded text-xl p-2 w-1/12 m-2 center">{{ object.reg_number|slice:"4:" }} {{ object.reg_number|slice:":3" }}</div>
<div class="flex flex-nowrap">
    <div class="border w-1/3 bg-green-800">
        <h4 class="font-bold">Tax:</h4>
        Valid until {{ object.tax_expires }}
    </div>
    <div class="border w-1/3 bg-green-800">
        <h4 class="font-bold">MOT:</h4>
        Valid until {{ object.mot_expires }}
    </div>
    <div class="border w-1/3 bg-green-800">
        <h4 class="font-bold">Insurance:</h4>
        Valid until {{ object.insurance.expires }}
    </div>
</div>
{% endblock %}