<page-header title="'Custom Templates'" breadcrumbs="['Custom Templates']" reload="true"> </page-header>

<div class="row">
  <stack-from-template-form
    ng-if="$ctrl.state.selectedTemplate"
    template="$ctrl.state.selectedTemplate"
    form-values="$ctrl.formValues"
    name-regex="$ctrl.state.templateNameRegex"
    state="$ctrl.state"
    create-template="$ctrl.createStack"
    unselect-template="$ctrl.unselectTemplate"
  >
    <advanced-form>
      <custom-templates-variables-field
        ng-if="$ctrl.isTemplateVariablesEnabled"
        definitions="$ctrl.state.selectedTemplate.Variables"
        value="$ctrl.formValues.variables"
        on-change="($ctrl.onChangeTemplateVariables)"
      ></custom-templates-variables-field>

      <div class="form-group">
        <div class="col-sm-12">
          <a class="small interactive vertical-center" ng-show="!$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = true;">
            <pr-icon icon="'plus'" class-name="space-right" feather="true"></pr-icon> Customize stack
          </a>
          <a class="small interactive vertical-center" ng-show="$ctrl.state.showAdvancedOptions" ng-click="$ctrl.state.showAdvancedOptions = false;">
            <pr-icon icon="'minus'" class-name="space-right" feather="true"></pr-icon> Hide custom stack
          </a>
        </div>
      </div>
      <!-- web-editor -->
      <web-editor-form
        ng-if="$ctrl.state.showAdvancedOptions"
        identifier="custom-template-creation-editor"
        value="$ctrl.formValues.fileContent"
        on-change="($ctrl.editorUpdate)"
        ng-required="true"
        yml="true"
        placeholder="# Define or paste the content of your docker compose file here"
      >
        <editor-description>
          <span class="col-sm-12 text-muted">
            You can get more information about Compose file format in the
            <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
            .
          </span>
        </editor-description>
      </web-editor-form>
      <!-- !web-editor -->
    </advanced-form>
  </stack-from-template-form>
</div>
<div class="row">
  <div class="col-sm-12">
    <custom-templates-list
      ng-if="$ctrl.templates"
      title-text="Templates"
      title-icon="edit"
      templates="$ctrl.templates"
      table-key="customTemplates"
      create-path="docker.templates.custom.new"
      edit-path="docker.templates.custom.edit"
      is-edit-allowed="$ctrl.isEditAllowed"
      on-select-click="($ctrl.selectTemplate)"
      on-delete-click="($ctrl.confirmDelete)"
    ></custom-templates-list>
  </div>
</div>
