{% extends "base.html" %}

{% block title %}Shipment #{{ shipment.pk }} - Demo SendParcel{% endblock %}

{% block page_title %}Shipment #{{ shipment.pk }}{% endblock %}

{% block content %}
<div class="row row-deck row-cards">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Shipment details</h3>
      </div>
      <div class="card-body">
        <div class="datagrid">
          <div class="datagrid-item">
            <div class="datagrid-title">Reference ID</div>
            <div class="datagrid-content">
              {{ shipment.reference_id|default:"—" }}
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Provider</div>
            <div class="datagrid-content">{{ shipment.provider }}</div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">External ID</div>
            <div class="datagrid-content">
              {{ shipment.external_id|default:"—" }}
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Tracking number</div>
            <div class="datagrid-content">
              <strong>{{ shipment.tracking_number|default:"—" }}</strong>
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Created at</div>
            <div class="datagrid-content">
              {{ shipment.created_at|date:"d.m.Y H:i" }}
            </div>
          </div>
        </div>

        <div class="hr-text">Addresses</div>

        <div class="row">
          <div class="col-md-6">
            <h4>Sender</h4>
            <address>
              <strong>{{ shipment.sender_name }}</strong><br>
              {{ shipment.sender_street }}<br>
              {{ shipment.sender_postal_code }} {{ shipment.sender_city }}<br>
              {{ shipment.sender_country_code }}
            </address>
          </div>
          <div class="col-md-6">
            <h4>Receiver</h4>
            <address>
              <strong>{{ shipment.receiver_name }}</strong><br>
              {{ shipment.receiver_street }}<br>
              {{ shipment.receiver_postal_code }} {{ shipment.receiver_city }}<br>
              {{ shipment.receiver_country_code }}
            </address>
          </div>
        </div>

        <div class="hr-text">Parcel</div>
        
        <div class="datagrid">
          <div class="datagrid-item">
            <div class="datagrid-title">Weight</div>
            <div class="datagrid-content">{{ shipment.weight }} kg</div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">Dimensions</div>
            <div class="datagrid-content">
              {{ shipment.width }} x {{ shipment.height }} x {{ shipment.length }} cm
            </div>
          </div>
        </div>

        <div class="alert alert-info mt-3 mb-0">
          Labels are returned by create operations and are not stored on the shipment record.
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Status</h3>
        <div class="card-actions">
          <button class="btn btn-icon btn-ghost-secondary"
                  hx-get="{% url 'shipping:shipment_refresh_status' pk=shipment.pk %}"
                  hx-target="#shipment-status"
                  hx-swap="outerHTML"
                  title="Refresh">
            <!-- Download SVG icon from http://tabler-icons.io/i/refresh -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
          </button>
        </div>
      </div>
      <div class="card-body text-center">
        <div class="mb-3">
          {% include "partials/status_badge.html" %}
        </div>
        
        {% if shipment.status == 'new' or shipment.status == 'created' or shipment.status == 'label_ready' %}
        <form method="post" action="{% url 'shipping:shipment_create_label' pk=shipment.pk %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-outline-success w-100">
            Create label
          </button>
        </form>
        {% endif %}
      </div>
    </div>

    {% if shipment.provider == 'delivery-sim' %}
    <div class="card mt-3">
      <div class="card-header">
        <h3 class="card-title">Delivery simulator</h3>
      </div>
      <div
        class="card-body"
        id="sim-panel"
        hx-get="{% url 'delivery_sim:panel' shipment_id=shipment.pk %}"
        hx-trigger="load"
        hx-swap="innerHTML"
      >
        <div class="text-secondary">Loading simulator...</div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}