{% extends 'email/base.html.twig' %}

{% block title %}Your Order Has Shipped - #{{ invoice.displayInvoiceNumber }}{% endblock %}

{% block content %}
<div class="icon-badge icon-success">
    <span>&#128666;</span>
</div>

<h2 class="text-center">Your Order is On Its Way!</h2>
<p class="text-center text-muted">
    Great news, {{ customer.name }}! Your order has been shipped and is on its way to you.
</p>

<div class="alert alert-success">
    <h4>Order Shipped</h4>
    <p>Your order #{{ invoice.displayInvoiceNumber }} has been dispatched and is en route to its destination.</p>
</div>

{% if trackingNumber is defined and trackingNumber %}
<div class="info-box" style="text-align: center;">
    <p style="margin: 0 0 10px; color: #666; font-size: 14px;">Tracking Number</p>
    <p style="margin: 0; font-size: 24px; font-family: monospace; color: #1a1a2e; font-weight: bold;">{{ trackingNumber }}</p>
    {% if trackingUrl is defined and trackingUrl %}
    <p style="margin: 15px 0 0;">
        <a href="{{ trackingUrl }}" class="btn btn-primary" style="display: inline-block;">Track Your Package</a>
    </p>
    {% endif %}
</div>
{% endif %}

<div class="info-box">
    <table>
        <tr>
            <td class="label">Order Number</td>
            <td class="value">#{{ invoice.displayInvoiceNumber }}</td>
        </tr>
        <tr>
            <td class="label">Ship Date</td>
            <td class="value">{{ shipDate|default('now')|date('F d, Y') }}</td>
        </tr>
        {% if carrier is defined and carrier %}
        <tr>
            <td class="label">Carrier</td>
            <td class="value">{{ carrier }}</td>
        </tr>
        {% endif %}
        {% if estimatedDelivery is defined and estimatedDelivery %}
        <tr>
            <td class="label">Estimated Delivery</td>
            <td class="value" style="color: #2e7d32;">{{ estimatedDelivery|date('F d, Y') }}</td>
        </tr>
        {% endif %}
    </table>
</div>

<h3>Shipping To</h3>
<div class="info-box">
    <p style="margin: 0;">
        <strong>{{ customer.name }}</strong><br>
        {% if customer.address %}{{ customer.address }}<br>{% endif %}
        {% if customer.poBox %}{{ customer.poBox }}<br>{% endif %}
        {% if customer.city %}{{ customer.city }}{% if customer.country %}, {{ customer.country }}{% endif %}{% endif %}
    </p>
</div>

<h3>Order Summary</h3>
<table class="data-table">
    <thead>
        <tr>
            <th>Item</th>
            <th>Qty</th>
        </tr>
    </thead>
    <tbody>
        {% for item in invoice.items %}
        <tr>
            <td>{{ item.description }}</td>
            <td>{{ item.quantity }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="steps">
    <h4>What to Expect</h4>
    <ol>
        <li>Your package is on its way to the shipping carrier</li>
        <li>You can track your delivery using the tracking number above</li>
        <li>Delivery times may vary based on your location</li>
        <li>Someone should be available to receive the package</li>
    </ol>
</div>

{% if statusUrl %}
<div class="btn-wrapper">
    <a href="{{ statusUrl }}" class="btn btn-secondary">View Order Details</a>
</div>
{% endif %}
{% endblock %}