<div class="modal-header">
    <button type="button"
            class="close"
            ng-click="ctrl.close()">&times;</button>
    <h3 class="panel-title">Add Cloud</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-xs-12">
            <form name="configForm">
                <div class="form-group has-feedback"
                     ng-class="{'has-error': configForm.name.$invalid && configForm.name.$dirty,
                     'has-success': configForm.name.$valid && configForm.name.$dirty}">
                    <label for="name" class="control-label">Name</label>
                    <input id="name"
                           name="name"
                           type="text"
                           class="form-control"
                           ng-model="ctrl.newConfiguration.name"
                           required
                           ng-minlength="5"
                           placeholder="Please provide a distinct name for this cloud.">
                    <span class="glyphicon glyphicon-remove form-control-feedback"
                          ng-if="!configForm.name.$valid && configForm.name.$dirty">
                    </span>
                    <span class="glyphicon glyphicon-ok form-control-feedback"
                          ng-if="configForm.name.$valid">
                    </span>
                    <small class="help-block">This will be used to
                        distinguish this group of API's from others. Please
                        use a name longer than 5 characters.
                    </small>
                </div>
                <div class="form-group has-feedback"
                     ng-class="{'has-error': configForm.ironic.$invalid && configForm.ironic.$dirty,
                     'has-success': configForm.ironic.$valid && configForm.ironic.$dirty}">
                    <label class="control-label" for="ironic">
                        Ironic API URL
                        <small class="text-muted"
                               ng-if="configForm.ironic.$pending">
                            &emsp;
                            <i class="fa fa-spin fa-refresh"></i>
                            Checking...
                        </small>
                    </label>

                    <input id="ironic"
                           name="ironic"
                           type="url"
                           required
                           ironic-api-url
                           class="form-control"
                           ng-model="ctrl.newConfiguration.ironic.apiRoot"
                           ng-model-options="{debounce: 250}"
                           placeholder="https://ironic.example.com:6385">
                    <span class="glyphicon glyphicon-remove form-control-feedback"
                          ng-if="!configForm.ironic.$valid && configForm.ironic.$dirty">
                    </span>
                    <span class="glyphicon glyphicon-ok form-control-feedback"
                          ng-if="configForm.ironic.$valid">
                    </span>
                    <small class="help-block"
                           ng-if="!configForm.ironic.$valid">Your API must
                        support CORS requests from
                        {{ctrl.location.protocol}}://{{ctrl.location.host}}:{{ctrl.location.port}}
                    </small>
                    <small class="help-block"
                           ng-if="configForm.ironic.$valid">Versions
                        {{configForm.ironic.$ironicVersions.join(', ')}}
                        detected.
                    </small>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal-footer ng-scope">
    <button type="submit"
            ng-disabled="!configForm.$valid"
            ng-click="ctrl.save()"
            class="btn btn-primary">
        Save
    </button>
    <button class="btn btn-default" ng-click="ctrl.close()">Cancel</button>
</div>
