{% extends "base.html" %}

{% block title %}New order — SendParcel Demo{% endblock %}

{% block page_title %}New order{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <form method="post" action="{% url 'shipping:order_create' %}">
      {% csrf_token %}
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Order details</h3>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label" for="id_description">Description</label>
              {{ form.description }}
              {% if form.description.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.description.errors.0 }}
                </div>
              {% endif %}
            </div>
            <div class="col-md-4">
              <label class="form-label" for="id_package_size">
                Package size
              </label>
              {{ form.package_size }}
              {% if form.package_size.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.package_size.errors.0 }}
                </div>
              {% endif %}
            </div>
          </div>

          <h4 class="mt-4 mb-3">Recipient details</h4>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="id_recipient_name">
                Full name
              </label>
              {{ form.recipient_name }}
              {% if form.recipient_name.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.recipient_name.errors.0 }}
                </div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="id_recipient_email">
                Email
              </label>
              {{ form.recipient_email }}
              {% if form.recipient_email.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.recipient_email.errors.0 }}
                </div>
              {% endif %}
            </div>
            <div class="col-md-4">
              <label class="form-label" for="id_recipient_phone">
                Phone
              </label>
              {{ form.recipient_phone }}
              {% if form.recipient_phone.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.recipient_phone.errors.0 }}
                </div>
              {% endif %}
            </div>
            <div class="col-md-8">
              <label class="form-label" for="id_recipient_line1">
                Address
              </label>
              {{ form.recipient_line1 }}
              {% if form.recipient_line1.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.recipient_line1.errors.0 }}
                </div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="id_recipient_city">
                City
              </label>
              {{ form.recipient_city }}
              {% if form.recipient_city.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.recipient_city.errors.0 }}
                </div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="id_recipient_postal_code">
                Postal code
              </label>
              {{ form.recipient_postal_code }}
              {% if form.recipient_postal_code.errors %}
                <div class="invalid-feedback d-block">
                  {{ form.recipient_postal_code.errors.0 }}
                </div>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="card-footer text-end">
          <a
            href="{% url 'shipping:order_list' %}"
            class="btn btn-link"
          >
            Cancel
          </a>
          <button type="submit" class="btn btn-primary">
            Create order
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %}