<div class="blade-content vc-order __medium-wide">
  <div class="blade-inner">
    <div class="inner-block">
      <form name="lineItemForm" class="form">
        <div ng-init="blade.setForm(lineItemForm)">
          <va-metaform registered-inputs="blade.metaFields" blade="blade" column-count="2" ng-if="blade.currentEntity"></va-metaform>
        </div>
      </form>
      <va-widget-container group="customerOrderItemDetailWidgets" blade="blade" gridster-opts="{columns: 4}"></va-widget-container>
    </div>
  </div>
</div>
<script type="text/ng-template" id="name.html">
  <div class="form-input">
    <a href="" ng-click="blade.openItemDetail()" style="font-size:14px;">{{ blade.currentEntity.name }}</a>
  </div>
  <div class="form-input" ng-if="blade.currentEntity.comment">
    <span style="font-size:14px;">{{ blade.currentEntity.comment }}</span>
  </div>
</script>
<script type="text/ng-template" id="status.html">
  <div class="form-input">
    <label class="form-label">{{ 'orders.blades.customerOrder-items.labels.status' | translate }} <a href="" ng-click="blade.openStatusSettingManagement()" class="form-edit"><span class="form-ico fa fa-pencil"></span></a></label>
    <va-setting-value-select placeholder="'orders.blades.customerOrder-detail.placeholders.status' | translate"
                             setting="'OrderLineItem.Statuses'"
                             ng-model="blade.currentEntity.status"
                             allow-clear="true"></va-setting-value-select>
  </div>
</script>
<script type="text/ng-template" id="sku.html">
  <div class="form-input">
    <input class="form-control" ng-model="blade.currentEntity.sku" id="sku" readonly="readonly" />
  </div>
</script>
<script type="text/ng-template" id="quantity.html">
  <div class="form-input __number">
    <input ng-pattern="/^[1-9]+[0-9]*$/" required ng-model="blade.currentEntity.quantity" ng-model-options="{ updateOn: 'blur' }" ng-change="blade.recalculate()" id="quantity" focus-on="quantity">
  </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-model-options="{ updateOn: 'blur' }" ng-change="blade.recalculate()" id="price" focus-on="price">
  </div>
</script>
<script type="text/ng-template" id="priceWithTax.html">
  <div class="form-input __currency">
    <span class="currency">{{blade.currentEntity.currency}}</span>
    <span class="list-price">{{blade.currentEntity.priceWithTax | currency:'' | showPrice:blade.isVisiblePrices}}</span>
  </div>
</script>
<script type="text/ng-template" id="discountAmount.html">
  <div class="form-input __currency">
    <span class="currency">{{blade.currentEntity.currency}}</span>
    <input money mask-money="!blade.isVisiblePrices" required ng-model="blade.currentEntity.discountAmount" ng-model-options="{ updateOn: 'blur' }" ng-change="blade.recalculate()" id="discountAmount" focus-on="discountAmount">
  </div>
</script>
<script type="text/ng-template" id="discountAmountWithTax.html">
  <div class="form-input __currency">
    <span class="currency">{{blade.currentEntity.currency}}</span>
    <span class="list-price">{{blade.currentEntity.discountAmountWithTax | currency:'' | showPrice:blade.isVisiblePrices}}</span>
  </div>
</script>
<script type="text/ng-template" id="taxTotal.html">
  <div class="form-input __currency">
    <span class="currency">{{blade.currentEntity.currency}}</span>
    <span class="list-price">{{blade.currentEntity.taxTotal | currency:'' | showPrice:blade.isVisiblePrices}}</span>
  </div>
</script>
<script type="text/ng-template" id="extendedPriceWithTax.html">
  <div class="form-input __currency">
    <span class="currency">{{blade.currentEntity.currency}}</span>
    <span class="list-price">{{blade.currentEntity.extendedPriceWithTax | currency:'' | showPrice:blade.isVisiblePrices}}</span>
  </div>
</script>