<div ng-controller="Umbraco.PrevalueEditors.CropSizesController" class="umb-editor umb-cropsizes">


    <div class="control-group" ng-if="model.value.length > 0">
        <ul class="unstyled list-icons"
            ui-sortable
            ng-model="model.value">
            <li ng-repeat="node in model.value">
                <a href=""><i class="icon icon-delete red hover-show pull-right" ng-click="remove(node, $event)"></i></a>
                <i class="icon icon-picture handle hover-hide"></i>

                <a href prevent-default ng-click="edit(node, $event)">{{node.alias}}</a>
                <br /><small>{{node.width}}px &times; {{node.height}}px</small>
            </li>
        </ul>
    </div>

    <div class="form" ng-show="newItem">
        <h4><localize key="imagecropper_defineCrop">Define crop</localize></h4>
        <p>
            <localize key="imagecropper_defineCropDescription">Give the crop an alias and it's default width and height</localize>.
        </p>

        <div class="control-group">
            <label><localize key="general_alias">Alias</localize></label>
            <input name="newItem.alias" type="text"
                   ng-model="newItem.alias" val-highlight="{{hasError}}" />
        </div>

        <div class="control-group">
            <label><localize key="general_size">Size</localize></label>
            <input name="newItem.width" type="number" localize="placeholder" placeholder="@general_width"
                   ng-model="newItem.width" class="umb-editor-small" val-highlight="{{hasError}}" />
            &times;
            <input name="newItem.height" type="number" localize="placeholder" placeholder="@general_height"
                   ng-model="newItem.height" class="umb-editor-small" val-highlight="{{hasError}}" />
        </div>

        <div class="control-group">
            <button class="btn" ng-click="add($event)"><localize key="imagecropper_saveCrop">Save crop</localize></button>
            <a href class="btn btn-link" ng-click="cancel($event)"><localize key="general_cancel">Cancel</localize></a>
        </div>
    </div>

    <div class="control-group" ng-hide="newItem">
        <button class="btn" ng-click="newItem = {}" prevent-default><localize key="imagecropper_addCrop">Add new crop</localize></button>
    </div>

</div>
