{% extends 'core/base.html' %}
{% block content %}
<nav>
  <ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16" style="position:relative;top:-40px;right:-19px;">
    <li class="text-lg leading-normal"><a class="text-white" href="{% url 'core:dashboard' %}">Home</a></li>
    <li class="text-lg pl-2 text-white before:pr-2 before:content-['/']"><a class="text-white" href="{% url 'core:vehicle_documents' %}">Vehicle documents</a></li>
    <li class="text-lg pl-2 capitalize text-white before:pr-2 before:content-['/']" aria-current="page">Review #{{ document.id }}</li>
  </ol>
</nav>
<div class="px-6 pb-12 mt-8 max-w-2xl mx-auto">
  <div class="rounded-2xl bg-white p-6 shadow-xl">
    <h1 class="text-xl font-semibold mb-2">Review vehicle document</h1>
    <p class="text-sm text-gray-600 mb-4">Vehicle {{ document.vehicle.registration_number }} · Owner {{ document.vehicle.owner.email }} · {{ document.get_document_type_display }}</p>
    {% if document.file %}
    <p class="mb-4"><a class="text-orange-600 underline" href="{{ document.file.url }}" target="_blank" rel="noopener">Open file</a></p>
    {% endif %}
    {% if document.review_status == 'APPROVED' %}
    <div class="rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
      This document is approved. Review controls are hidden.
    </div>
    <div class="mt-4">
      <a href="{% url 'core:vehicle_documents' %}" class="inline-block rounded-lg border px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Back to vehicle documents</a>
    </div>
    {% else %}
    <form method="post" class="space-y-4">
      {% csrf_token %}
      {% for field in form %}
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1" for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field }}
        {% if field.errors %}<p class="text-red-600 text-sm">{{ field.errors }}</p>{% endif %}
      </div>
      {% endfor %}
      <div class="flex gap-2">
        <button type="submit" style="background-color:#d37f2c" class="text-white px-4 py-2 rounded-lg">Save</button>
        <a href="{% url 'core:vehicle_documents' %}" class="px-4 py-2 border rounded-lg">Cancel</a>
      </div>
    </form>
    {% endif %}
  </div>
</div>
<style>#id_review_status, #id_expiry_date { border:1px solid #ccc; border-radius:8px; padding:0.5rem; width:100%; max-width:320px;}</style>
{% endblock %}