<div class="row">

    <form class="form-horizontal" role="form" name="edit.form">

        <div class="form-group">

            <label for="id" class="col-sm-3 control-label" data-translate="moon.policy.edit.basic.form.id">Id</label>

            <div class="col-sm-6">

                <input name="id" id="id" disabled class="form-control" type="text" data-ng-model="edit.policyToEdit.id" required />

            </div>

        </div>

        <div class="form-group" ng-class="{'has-error': edit.form.name.$invalid && edit.form.name.$dirty}">

            <label for="name" class="col-sm-3 control-label" data-translate="moon.policy.edit.basic.form.name">Name</label>

            <div class="col-sm-6">

                <input name="name" id="name" class="form-control" type="text" data-ng-model="edit.policyToEdit.name" required />

                <div class="help-block" ng-show="edit.form.name.$dirty && edit.form.name.$invalid">
                    <small class="error" ng-show="edit.form.name.$error.required" data-translate="moon.policy.edit.basic.check.name.required">Name is required</small>
                </div>

            </div>

        </div>


        <div class="form-group" ng-class="{'has-error': edit.form.model.$dirty && (edit.form.model.$invalid || !edit.selectedModel)}">

            <label class="col-sm-3 control-label" data-translate="moon.policy.edit.basic.form.model">Models</label>

            <div class="col-sm-6">

                <ui-select ng-model="edit.selectedModel" name="model" required>
                    <ui-select-match placeholder="(None)">{{$select.selected.name}}</ui-select-match>
                    <ui-select-choices repeat="model in edit.models">
                        <div ng-value="model">{{model.name}}</div>
                    </ui-select-choices>
                </ui-select>

                <moon-loader ng-if="edit.modelsLoading"></moon-loader>

                <div class="help-block" ng-show="edit.form.model.$dirty && (edit.form.model.$invalid || !edit.selectedModel)">
                    <small class="error" ng-show="edit.form.model.$error.required" data-translate="moon.policy.edit.basic.check.model.required">Model is required</small>
                </div>

            </div>

        </div>

        <div class="form-group">

            <label for="description" class="col-sm-3 control-label" data-translate="moon.policy.edit.basic.form.description">Description</label>
            <div class="col-sm-6">
                <textarea id="description" name="description" class="form-control" data-ng-model="edit.policyToEdit.description"></textarea>
            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-2 col-sm-offset-3">

                <a href=""  ng-disabled="edit.loading" ng-click="edit.init()" class="btn btn-default">
                    <span data-translate="moon.policy.edit.basic.action.init">Init</span>
                </a>
            </div>

            <div class="col-sm-4 col-sm-offset-2">

                <a href="" ng-disabled="edit.loading" ng-click="edit.editPolicy()" class="btn btn-warning">
                    <span class="glyphicon glyphicon-save"></span>
                    <span data-translate="moon.policy.edit.basic.action.update">Update</span>
                </a>

                <moon-loader ng-if="edit.loading"></moon-loader>
            </div>

        </div>

    </form>

</div>