@model InventoryTraker.Web.Models.InventoryAddForm
<form novalidate
      name="vm.form"
      ng-submit="vm.form.$valid && vm.save()">
    <fieldset ng-disabled="vm.saving">

        <div class="modal-header">
            <h3 class="modal-title"><i class="fa fa-cubes"></i> Inventory Details</h3>
        </div>

        <div class="modal-body">

            <error-list errors="vm.errorMessages"></error-list>

            <inventory-info inventory="inventory"></inventory-info>
            <div class="modal-footer">
                <button ng-click="vm.removeInventory()" class="btn btn-sm pull-left"><i class="fa fa-minus-circle"></i> Remove Inventory</button>
                <button class="btn btn-success" ng-disabled="vm.form.$invalid || vm.form.$pristine">Save</button>
                <button type="button" class="btn" ng-click="$parent.$dismiss()">Cancel</button>
            </div>

            <hr />

            <h4 class="modal-title pull-left"><i class="fa fa-fw fa-list"></i> Transactions</h4>

            <table class="table table-striped table-condensed">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Memo</th>
                        <th>Transaction Date</th>
                        <th>Add Qty</th>
                        <th>Remove Qty</th>
                        <th>Qty</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody ng-hide="vm.loadingTransactions">
                <tr ng-repeat-start="transaction in vm.transactions | orderBy:['-transactionDate', 'currentQuantity']">
                    <td>
                        {{transaction.transactionType}}
                        <span ng-show="transaction.destination"><i class="fa fa-map-marker" title="{{transaction.destination}}"></i></span>
                    </td>
                    <td>{{transaction.memo}}</td>
                    <td>{{transaction.transactionDate | date:'shortDate'}}</td>
                    <td>{{transaction.addedQuantity}}</td>
                    <td>{{transaction.removedQuantity}}</td>
                    <td>{{transaction.currentQuantity}}</td>
                    <td>
                        <a href="" ng-show="$first"
                           ng-click="vm.confirmDeleteTransaction = !vm.confirmDeleteTransaction">
                            <i class="fa fa-trash"></i>
                        </a>
                    </td>
                </tr>
                <tr ng-repeat-end ng-show="$first && vm.confirmDeleteTransaction">
                    <td colspan="7">
                        <span ng-show="vm.transactions.length == 1" class="text-danger">
                            Warning: Deleting the only transaction will delete the entire inventory
                        </span>
                        <button
                            ng-click="vm.deleteTransaction(transaction.id)"
                            class="btn btn-danger btn-sm pull-right">
                            <i class="fa fa-trash"></i> Confirm Delete
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</form>