<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-popup title="Build stack from recipe" on-close="buildStackController.cancel()">
  <div class="build-stack">

    <md-tabs md-dynamic-height
             md-stretch-tabs="auto"
             md-no-ink-bar="true">

      <md-tab ng-repeat="editor in buildStackController.recipeEditors">

        <md-tab-label>
          <span class="build-stack-{{ editor.recipe.type }}">{{ editor.title }}</span>
        </md-tab-label>

        <md-tab-body>
          <div class="recipe-editor-wrapper">
            <ng-form name="editorForm">
              <recipe-editor validate-recipe-fn="editor.validateRecipe(content)"
                             change-recipe-fn="editor.changeRecipe(content)"
                             editor-mode="editor.recipe.contentType"
                             allow-invalid-recipe="true"></recipe-editor>
            </ng-form>
          </div>

          <div layout="row" layout-align="start start">
            <div class="recipe-docs-link">
              <a ng-href="{{buildStackController.stackDocsUrl}}" target="_blank">Custom stack documentation</a>
            </div>
            <div flex></div>
            <che-button-notice che-button-title="Cancel"
                               ng-click="buildStackController.cancel()">
            </che-button-notice>
            <che-button-primary che-button-title="Ok"
                                ng-disabled="editorForm.$invalid"
                                ng-click="buildStackController.importRecipe(editor)">
            </che-button-primary>
          </div>
        </md-tab-body>

      </md-tab>

    </md-tabs>

  </div>
</che-popup>
