<div class="container">
  <div class="row">
    <pageheader headertitle="jsp.projects.dialog.title.createProject">
    </pageheader>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <form name="createProjectForm" ng-submit="$ctrl.save(createProjectForm.$valid)"
          class="form-horizontal" novalidate>

        <textinputfield field="createProjectForm.projectName"
          model="$ctrl.projectName" name="projectName" autofocus required
          label="jsp.createProject.form.label.name" maxlength="100"
          labelcols="3" inputcols="8">
        </textinputfield>

        <div class="form-group">
          <label class="col-sm-3 control-label" for="bibiscoCreateProjectSelectLanguage">{{"jsp.createProject.form.label.language" | translate}}</label>
          <div class="col-sm-8" ng-class="{ 'has-error': createProjectForm.$submitted && createProjectForm.projectLanguage.$invalid }">
            <!-- How does it work? Take a look here:
            https://stackoverflow.com/questions/39032484/how-to-repeat-object-properties-in-angular-ui-select-choices/39035468#39035468 -->
            <ui-select ng-model="$ctrl.projectLanguage">
              <ui-select-match>
                <span ng-bind="$select.selected.value"></span>
              </ui-select-match>
              <ui-select-choices repeat="language.key as (key, language) in $ctrl.projectLocales | filter: {'value':$select.search}">
                <span ng-bind-html="language.value"></span>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
        <div class="top30 col-sm-9 col-sm-offset-3">
          <button type="submit" class="btn btn-primary">
            {{"jsp.common.button.save" | translate}}
          </button>
          <buttonback fixedpath="$ctrl.backpath"></buttonback>
        </div>
      </form>
    </div>
  </div>
</div>
