<div class="col-md-12" ng-controller="ViewProductMixController">
    <ul class="breadcrumb">
        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
        <li><a href="#/productmix">{{'label.anchor.productmix' | translate}}</a></li>
        <li class="active">{{'label.anchor.viewproductmix' | translate}}</li>
    </ul>
    <div class="well">
        <div class="btn-group pull-right" data-ng-hide="center.status.value == 'Closed'">
            <a href="#/editproductmix/{{productmix.productId}}" class="btn btn-primary" has-permission='UPDATE_PRODUCTMIX'><i
                    class="icon-edit icon-white"></i>{{ 'label.button.edit' | translate }}</a>
            <button class="btn btn-warning" data-ng-click="deleteProductmix()" has-permission='DELETE_PRODUCTMIX'><i
                    class="icon-trash icon-white"></i>{{ 'label.button.delete' | translate }}
            </button>
        </div>
        <br/>
        <script type="text/ng-template" id="deleteproductmix.html">
            <div class="modal-header silver">
                <h3 class="bolder">{{'label.heading.delete' | translate}}</h3>
            </div>
            <div class="modal-body ">
                <api-validate></api-validate>
                <br>
                <button class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
                <button class="btn btn-primary" ng-click="delete()">{{'label.button.confirm' | translate}}</button>
            </div>
        </script>
        <div class="row paddedtop">
            <div class="col-sm-6 col-md-6">
                <table class="table table-striped" width="100%">
                    <thead>
                    <tr class="graybg">
                        <th colspan="2">{{ 'label.heading.allowedproducts' | translate }}</th>
                    </tr>
                    </thead>
                    <tr data-ng-repeat="allowed in productmix.allowedProducts">
                        <td class="width40">{{allowed.name}}</td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-6 col-md-6">
                <table class="table table-striped" width="100%">
                    <thead>
                    <tr class="graybg">
                        <th colspan="2">{{ 'label.heading.restrictedproducts' | translate }}</th>
                    </tr>
                    </thead>
                    <tr data-ng-repeat="restricted in productmix.restrictedProducts">
                        <td class="width40">{{restricted.name}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

