{% extends 'barrier/barrier-base.html' %}
{% load static %}
{% block content %}
<div class="barrier-container">
    {% if show_search %}
        <form method="get" class="w-full">
            <div class="p-6">
                <label for="id_number" class="block text-2xl mb-4">
                    Enter Booking Number
                </label>
                <div class="form-group">
                    <input type="text"
                           id="id_number"
                           name="number"
                           value="{{ search_number }}"
                           class="px-4 py-3 text-xl border-2 rounded-lg"
                           required
                           autocomplete="off"
                           autofocus>
                    <div class="form-group">
                        <button type="submit" class="btn-primary">
                            Search
                        </button>
                    </div>
                    {% if error %}
                    <div class="text-red-600 text-xl text-center">
                        {{ error }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </form>
    {% elif form %}
        <form method="post" class="w-full">
            {% csrf_token %}
            <input type="hidden" name="booking_id" value="{{ booking.id }}">
            <input type="hidden" name="container_id" value="{{ container.id }}">
            <input type="hidden" name="search_number" value="{{ search_number }}">
            <div class="p-6">
                <div class="flex flex-col gap-4">
                    <div class="form-group">
                        <p>
                            <label for="id_booking_number">Booking number:</label>
                            <input type="text" name="booking_number" value="{{ booking.number }}" maxlength="11" required id="id_booking_number" readonly disabled>
                        </p>
                        {{ form.as_p }}
                    </div>
                    <div class="form-group">
                        <button type="submit" name="expedite" class="btn-primary">
                            Expedite container
                        </button>
                        <button type="button" onclick="window.location.href='{% url 'barrier_dashboard' %}'" class="btn-secondary">
                            Back
                        </button>
                    </div>
                </div>
            </div>
        </form>
    {% endif %}
</div>
    
{% endblock content %}