<div layout="column" flex class="recipe-authoring" md-theme="default">
  <ng-form name="workspaceRecipeAuthoringForm">

    <div layout="column" class="recipe-editor">
      <textarea ui-codemirror="workspaceRecipeAuthoringController.editorOptions"
                ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 1000, 'blur': 0 }, allowInvalid: true }"
                ng-model="workspaceRecipeAuthoringController.recipeScriptCopy"
                ng-change="workspaceRecipeAuthoringController.onRecipeChange()"></textarea>
      <che-input che-form="workspaceRecipeAuthoringForm"
                 che-name="recipe"
                 type="hidden"
                 ng-model="workspaceRecipeAuthoringController.recipeScriptCopy"
                 custom-validator="workspaceRecipeAuthoringController.isRecipeValid()"
                 ng-required>
        <che-error-messages che-message-scope="workspace-details-environment"
                            che-message-name="Recipe content">
<!--      TODO: remove this empty ng-message after investigating the first message crashing problem      -->
          <div ng-message></div>
          <div ng-message="required">The recipe is required.</div>
          <div ng-message="customValidator">{{workspaceRecipeAuthoringController.recipeValidationError}}</div>
        </che-error-messages>
      </che-input>
      <div class="recipe-docs-link">
        <a ng-href="{{workspaceRecipeAuthoringController.stackDocsUrl}}" target="_blank">Custom stack documentation</a>
      </div>
    </div>

  </ng-form>
</div>
