{% extends "base.html" %}
{% block title %}New shipment - Shipping demo{% endblock %}
{% block content %}
<div class="page-header d-print-none mb-3">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">New shipment</h2>
      <div class="text-secondary">
        Fill in the shipment details and choose a provider.
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <form method="post" action="/shipments/create">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Provider</label>
          <select class="form-select" name="provider" required>
            {% for slug, name in providers %}
            <option value="{{ slug }}">{{ name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Package size</label>
          <select class="form-select" name="package_size" required>
            <option value="S">S - small</option>
            <option value="M" selected>M - medium</option>
            <option value="L">L - large</option>
          </select>
        </div>

        <div class="col-12">
          <hr class="my-2" />
          <h3 class="mb-3">Sender</h3>
        </div>
        <div class="col-md-6">
          <label class="form-label">Full name</label>
          <input class="form-control" type="text" name="sender_name" />
        </div>
        <div class="col-md-6">
          <label class="form-label">Street</label>
          <input class="form-control" type="text" name="sender_line1"
                 placeholder="Street and number" />
        </div>
        <div class="col-md-4">
          <label class="form-label">City</label>
          <input class="form-control" type="text" name="sender_city" />
        </div>
        <div class="col-md-4">
          <label class="form-label">Postal code</label>
          <input class="form-control" type="text" name="sender_postal_code" />
        </div>

        <div class="col-12">
          <hr class="my-2" />
          <h3 class="mb-3">Receiver</h3>
        </div>
        <div class="col-md-6">
          <label class="form-label">Full name</label>
          <input class="form-control" type="text" name="recipient_name" />
        </div>
        <div class="col-md-6">
          <label class="form-label">Receiver email</label>
          <input class="form-control" type="email" name="recipient_email" required />
        </div>
        <div class="col-md-6">
          <label class="form-label">Phone</label>
          <input class="form-control" type="text" name="recipient_phone" required />
        </div>
        <div class="col-md-6">
          <label class="form-label">Street</label>
          <input class="form-control" type="text" name="recipient_line1"
                 placeholder="Street and number" />
        </div>
        <div class="col-md-4">
          <label class="form-label">City</label>
          <input class="form-control" type="text" name="recipient_city" />
        </div>
        <div class="col-md-4">
          <label class="form-label">Postal code</label>
          <input class="form-control" type="text" name="recipient_postal_code" />
        </div>
      </div>

      <div class="mt-4">
        <button class="btn btn-primary" type="submit">Create shipment</button>
        <a href="/" class="btn btn-outline-secondary ms-2">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}