<div class="blade-static __bottom" ng-include="'$(Platform)/Scripts/common/templates/ok-cancel2.tpl.html'"></div>
<div class="blade-content vc-order __medium-wide">
    <div class="blade-inner">
        <div class="inner-block" ng-controller="virtoCommerce.orderModule.shipmentDetailController">
            <div class="order-status" ng-if="blade.currentEntity.status">
                <div class="status" ng-bind="blade.currentEntity.status | settingTranslate:'Shipment.Status'"></div>
                <div class="reason" ng-bind="blade.currentEntity.cancelReason" ng-if="blade.currentEntity.isCancelled"></div>
            </div>
            <div class="order-brand" ng-if="!blade.isNew">
                <div class="brand-image">
                    <img class="brand-logo" ng-src="{{blade.currentEntity.shippingMethod.logoUrl}}" alt="" ng-if="blade.currentEntity.shippingMethod.logoUrl">
                </div>
                <div class="brand-t" title="{{blade.currentEntity.shippingMethod.description}}">{{blade.currentEntity.shippingMethod.name}}</div>
                <div class="brand-descr" title="{{blade.currentEntity.shippingMethod.optionDescription}}" ng-if="blade.currentEntity.shippingMethod.optionName">{{blade.currentEntity.shippingMethod.optionName}}</div>
            </div>

            <form class="form" name="detailForm">
                <fieldset ng-disabled="blade.isLocked">
                    <div class="form-group" ng-if="blade.isNew">
                        <label class="form-label">{{ 'orders.blades.shipment-detail.labels.shipment-method' | translate }}</label>
                        <div class="form-input">
                            <ui-select ng-model="blade.currentEntity.shippingMethod" required ng-disabled="blade.isLocked">
                                <ui-select-match placeholder="{{ 'orders.blades.shipment-detail.placeholders.shipment-method' | translate }}">{{$select.selected.name}}</ui-select-match>
                                <ui-select-choices repeat="x in blade.shippingMethods | filter: { name: $select.search }">
                                    <span ng-bind-html="x.name | highlight: $select.search"></span>
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                    <div class="form-group" ng-init="setForm(detailForm)">
                        <label class="form-label">{{ 'orders.blades.shipment-detail.labels.approved' | translate }}</label>
                        <div class="form-input">
                            <label class="form-label __switch">
                                <input type="checkbox" ng-model="blade.currentEntity.isApproved" />
                                <span class="switch"></span>
                            </label>
                        </div>
                    </div>

                    <div class="form columns">
                        <div class="column">
                            <div class="form-group">
                                <label class="form-label">
                                    {{ 'orders.blades.shipment-detail.labels.fulfillment-center' | translate }}
                                    <a href="" ng-click="blade.openFulfillmentCentersList()" class="form-edit"><i class="form-ico fa fa-pencil"></i></a>
                                </label>
                                <div class="form-input">
                                    <ui-select ng-model="blade.currentEntity.fulfillmentCenterId" ng-disabled="blade.isLocked">
                                        <ui-select-match placeholder="{{ 'orders.blades.shipment-detail.placeholders.fulfillment-center' | translate }}">{{$select.selected.name}}</ui-select-match>
                                        <ui-select-choices repeat="center.id as center in blade.fulfillmentCenters | filter: { name: $select.search }">
                                            <span ng-bind-html="center.name | highlight: $select.search"></span>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div ng-if="blade.isNew" style="height:60px">&nbsp;</div>
                            <div ng-if="!blade.isNew" class="form-group">
                                <label class="form-label">
                                    {{ 'orders.blades.shipment-detail.labels.shipment-method-option' | translate }}
                                </label>
                                <div class="form-input">
                                    <input ng-readonly="true"
                                           ng-model="blade.currentEntity.shipmentMethodOption"
                                           placeholder="{{ 'orders.blades.shipment-detail.placeholders.shipment-method-option' | translate}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <va-metaform registered-inputs="blade.metaFields" blade="blade" column-count="2"></va-metaform>
            </form>

            <va-widget-container group="shipmentDetailWidgets" blade="blade" gridster-opts="{width: 526}"></va-widget-container>
        </div>
    </div>
</div>

<script type="text/ng-template" id="statusSelector.html">
    <va-setting-value-select blade="blade"
                             label="'orders.blades.shipment-detail.labels.status' | translate"
                             placeholder="'orders.blades.shipment-detail.placeholders.status' | translate"
                             setting="'Shipment.Status'"
                             ng-model="blade.currentEntity.status"
                             disabled="blade.isLocked"></va-setting-value-select>
</script>

<script type="text/ng-template" id="shipment-employeeSelector.html">
    <div class="form-input">
        <ui-scroll-drop-down data="blade.fetchEmployees(criteria)"
                             ng-model="blade.currentEntity.employeeId"
                             on-select="blade.currentEntity.employeeName = item.name"
                             on-remove="blade.currentEntity.employeeName = undefined"
                             placeholder="'orders.blades.customerOrder-detail.placeholders.employee'"
                             disabled="blade.isLocked">
        </ui-scroll-drop-down>
    </div>
</script>

<script type="text/ng-template" id="price.html">
    <div class="form-input __currency">
        <span class="currency">{{blade.currentEntity.currency}}</span>
        <input money mask-money="!blade.isVisiblePrices" required ng-model="blade.currentEntity.price" ng-change="blade.updateRecalculationFlag()">
    </div>
</script>
<script type="text/ng-template" id="priceWithTax.html">
    <div class="form-input __currency">
        <span class="currency">{{blade.currentEntity.currency}}</span>
        <input money mask-money="!blade.isVisiblePrices" required ng-model="blade.currentEntity.priceWithTax" ng-change="blade.updateRecalculationFlag()">
    </div>
</script>

<script type="text/ng-template" id="vendor.html">
    <div class="form-input">
        <label class="form-label">{{ 'orders.blades.shipment-detail.labels.vendor' | translate }} <a href="" ng-click="blade.openVendorsManagement()" class="form-edit" va-permission="customer:read"><i class="form-ico fa fa-pencil"></i></a></label>
        <ui-scroll-drop-down ng-model="blade.currentEntity.vendorId"
                             data="blade.fetchVendors(criteria)"
                             placeholder="'orders.blades.shipment-detail.placeholders.vendor'">
        </ui-scroll-drop-down>
    </div>
</script>

