<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body" ng-cloak>

	<h3 class="page-sub-heading">New Dashboard Folder</h3>

  <form name="ctrl.saveForm" ng-submit="ctrl.create()" novalidate>
		<div class="gf-form-inline">
			<div class="gf-form gf-form--grow">
				<label class="gf-form-label width-10">Name</label>
				<input type="text" class="gf-form-input" ng-model="ctrl.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-model-options="{ debounce: 400 }" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
				<label class="gf-form-label text-success" ng-if="ctrl.titleTouched && !ctrl.hasValidationError">
					<i class="fa fa-check"></i>
				</label>
			</div>
		</div>

		<div class="gf-form-inline" ng-if="ctrl.hasValidationError">
			<div class="gf-form offset-width-10 gf-form--grow">
				<label class="gf-form-label text-warning gf-form-label--grow">
					<i class="fa fa-warning"></i>
					{{ctrl.validationError}}
				</label>
			</div>
		</div>

		<div class="gf-form-button-row">
			<button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
				<i class="fa fa-save"></i> Create
			</button>
		</div>
	</form>

</div>
