energylink/public/app/features/dashboard/partials/create_folder.html

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

<div class="page-container page-body" ng-cloak>
  <h3 class="section-heading">
    Create New Folder
  </h3>

  <form name="ctrl.saveForm" ng-submit="ctrl.create()" class="modal-content folder-modal" novalidate>
    <div class="gf-form-group">
      <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.nameExists && ctrl.title">
            <i class="fa fa-check"></i>
          </label>
        </div>
      </div>

      <div class="gf-form-inline" ng-if="ctrl.nameExists">
        <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>
            A Folder or Dashboard with the same name already exists
          </label>
        </div>
      </div>

      <div class="gf-form-inline" ng-if="!ctrl.title && ctrl.titleTouched">
        <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>
            A Folder should have a name
          </label>
        </div>
      </div>
    </div>

    <div class="gf-form-button-row">
      <button type="submit" class="btn btn-success width-12" ng-disabled="ctrl.nameExists || ctrl.title.length === 0">
        <i class="fa fa-save"></i> Create
      </button>
    </div>
  </form>

</div>