<umb-box>
    <umb-box-content>
        <div class="sub-view-columns">
            <div class="sub-view-column-left">
                <h5><localize key="macro_parameters">Parameters</localize></h5>
                <small><localize key="macro_parametersDescription">Define the parameters that should be available when using this macro.</localize></small>
            </div>
            <div class="sub-view-column-right">
                <div class="umb-property-editor form-horizontal" ng-controller="Umbraco.Editors.Macros.ParametersController">
                    <div ui-sortable="sortableOptions" ng-model="model.macro.parameters">
                        <div class="control-group umb-prevalues-multivalues__listitem" ng-repeat="parameter in model.macro.parameters track by $id(parameter)">
                            <i class="icon icon-navigation handle"></i>
                            <div class="umb-prevalues-multivalues__left">
                                <span>{{parameter.label}}</span>&nbsp;<span class="muted">({{parameter.key}})</span>:&nbsp;<small>{{parameter.editor}}</small>
                            </div>
                            <div class="umb-prevalues-multivalues__right">
                                <a class="umb-node-preview__action" ng-click="edit(parameter, $event)"><localize key="general_edit">Edit</localize></a>
                                <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(parameter, $event)"><localize key="general_remove">Remove</localize></a>
                            </div>
                        </div>
                    </div>
                    <umb-button
                        type="button"
                        button-style="info"
                        action="add($event)"
                        label-key="general_add">
                    </umb-button>
                </div>
            </div>
        </div>

    </umb-box-content>
</umb-box>
