<div class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <h2>{{::vm.translate.get('Shipment Details')}} #{{vm.shipment.id}}</h2>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">

        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Shipping Information')}}</h5>
                        <table class="table">
                            <tr>
                                <td>{{::vm.translate.get('Created Date')}}</td>
                                <td>{{vm.shipment.createdOn | date:'medium'}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Tracking Number')}}</td>
                                <td>{{vm.shipment.trackingNumber}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Warehouse')}}</td>
                                <td>{{vm.shipment.warehouseName}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Order Id')}}</td>
                                <td><a ui-sref="order-detail({id: vm.shipment.orderId})" title="View"># {{vm.shipment.orderId}}</a></td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Shipping Address')}}</h5>
                        <p>
                            {{vm.shipment.shippingAddress.contactName}} <br />
                            {{vm.shipment.shippingAddress.addressLine1}} <br />
                            {{vm.shipment.shippingAddress.districtName}}, {{vm.shipment.shippingAddress.stateOrProvinceName}} <br />
                            {{::vm.translate.get('Phone')}}: {{vm.shipment.shippingAddress.phone}}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="panel-title">{{::vm.translate.get('Product Information')}}</h3>
            </div>
            <div class="card-body">
                <table class="table table-striped order-item-list">
                    <thead>
                        <tr>
                            <th>{{::vm.translate.get('Product')}}</th>
                            <th>{{::vm.translate.get('Sku')}}</th>
                            <th class="text-right">{{::vm.translate.get('Quantity')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in vm.shipment.items">
                            <td>
                                <a ui-sref="product-edit({id: item.productId})">{{item.productName}}</a>
                                <ul ng-if="item.variationOptions.length > 0" class="list-unstyled">
                                    <li ng-repeat="opt in item.variationOptions">
                                        <span>{{opt.optionName}}:</span> {{opt.value}}
                                    </li>
                                </ul>
                            </td>
                            <td>{{item.productSku}}</td>
                            <td class="text-right">{{item.quantity}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <button ui-sref="shipments" class="btn btn-default">{{::vm.translate.get('Shipment List')}}</button>
        </div>
        <br />
    </div>
</section>