<form data-ng-controller="ViewProductMixController" ng-submit="submit()">
    <api-validate></api-validate>
    <div class="paddedleft">
        <h3>{{ 'label.heading.editproductmix' | translate }}</h3>

        <div class="row">
            <div class="col-sm-3 col-md-3 col-md-offset-1">
                <label class="control-label col-sm-9">{{ 'label.input.allowedproducts' | translate }}</label>
                <select multiple ng-model="allowed" class="form-control clear" 
                		ng-options="allowedProduct.id as allowedProduct.name for allowedProduct in allowedProducts">
                </select>
            </div>
            <div class="paddedtop10 col-sm-1 col-md-1 paddedleft0">
                <button type="button" class="btn btn-primary" data-ng-click="restrict()"><i
                        class="icon-double-angle-right"></i></button>
                <br/>
                <button type="button" class="btn btn-primary" data-ng-click="allow()"><i
                        class="icon-double-angle-left"></i></button>
            </div>
            <div class="col-sm-3 col-md-3">
                <label class="control-label col-sm-9">{{ 'label.input.restrictedproducts' | translate }}</label>
                <select multiple ng-model="restricted" class="form-control clear" 
                    	ng-options="restrictedProduct.id as restrictedProduct.name for restrictedProduct in restrictedProducts">
                </select>
            </div>
        </div>
        <br/>
        <div class="col-md-offset-2">
            <a href="#/viewproductmix/{{productmix.productId}}" class="btn btn-default">{{ 'label.button.cancel' | translate }}</a>
            <button id="save" type="submit" class="btn btn-primary" has-permission='UPDATE_PRODUCTMIX'>{{ 'label.button.save' | translate }}</button>
        </div>
    </div>
</form>
