{% extends "base.html" %}

{% block title %}Orders{% endblock %}

{% block content %}
<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col-auto">
      <h2 class="page-title">Orders</h2>
    </div>
  </div>
</div>

<div class="card mt-3">
  <div class="card-header">
    <h3 class="card-title">New order</h3>
  </div>
  <div class="card-body">
    <form method="post" action="/orders">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label">Description</label>
          <input class="form-control" type="text" name="description"
                 placeholder="e.g. Package with books" required />
        </div>
        <div class="col-md-3">
          <label class="form-label">Weight (kg)</label>
          <input class="form-control" type="number" name="total_weight"
                 min="0.1" step="0.1" value="1.0" required />
        </div>
      </div>
      <div class="row g-3 mt-1">
        <div class="col-md-4">
          <label class="form-label">Sender — full name</label>
          <input class="form-control" type="text" name="sender_name" required />
        </div>
        <div class="col-md-4">
          <label class="form-label">Sender — email</label>
          <input class="form-control" type="email" name="sender_email" required />
        </div>
        <div class="col-md-4">
          <label class="form-label">Sender — phone</label>
          <input class="form-control" type="text" name="sender_phone" />
        </div>
      </div>
      <div class="row g-3 mt-1">
        <div class="col-md-6">
          <label class="form-label">Sender — address</label>
          <input class="form-control" type="text" name="sender_line1"
                 placeholder="1 Example St" />
        </div>
        <div class="col-md-3">
          <label class="form-label">City</label>
          <input class="form-control" type="text" name="sender_city" />
        </div>
        <div class="col-md-3">
          <label class="form-label">Postal code</label>
          <input class="form-control" type="text" name="sender_postal_code" />
        </div>
      </div>
      <div class="row g-3 mt-1">
        <div class="col-md-4">
          <label class="form-label">Recipient — full name</label>
          <input class="form-control" type="text" name="recipient_name" required />
        </div>
        <div class="col-md-4">
          <label class="form-label">Recipient — email</label>
          <input class="form-control" type="email" name="recipient_email" required />
        </div>
        <div class="col-md-4">
          <label class="form-label">Recipient — phone</label>
          <input class="form-control" type="text" name="recipient_phone" />
        </div>
      </div>
      <div class="row g-3 mt-1">
        <div class="col-md-6">
          <label class="form-label">Recipient — address</label>
          <input class="form-control" type="text" name="recipient_line1"
                 placeholder="5 Destination St" />
        </div>
        <div class="col-md-3">
          <label class="form-label">City</label>
          <input class="form-control" type="text" name="recipient_city" />
        </div>
        <div class="col-md-3">
          <label class="form-label">Postal code</label>
          <input class="form-control" type="text" name="recipient_postal_code" />
        </div>
      </div>
      <div class="mt-3">
        <button class="btn btn-primary" type="submit">Create order</button>
      </div>
    </form>
  </div>
</div>

{% if orders %}
<div class="card mt-3">
  <div class="card-header">
    <h3 class="card-title">Order list</h3>
  </div>
  <div class="table-responsive">
    <table class="table table-vcenter card-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Description</th>
          <th>Weight</th>
          <th>Recipient</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for order in orders %}
        <tr>
          <td>{{ order.id }}</td>
          <td>{{ order.description }}</td>
          <td>{{ order.total_weight }} kg</td>
          <td>{{ order.recipient_name }}</td>
          <td>
            <a class="btn btn-sm btn-outline-primary"
               href="/orders/{{ order.id }}">Details</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}