<page-header title="'Edit Edge stack'" breadcrumbs="[{label:'Edge Stacks', link:'edge.stacks'}, $ctrl.stack.Name]" reload="true"> </page-header>

<div class="row" ng-if="$ctrl.stack">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body classes="no-padding">
        <uib-tabset active="$ctrl.state.activeTab" justified="true" type="pills">
          <uib-tab index="0" classes="btn-sm">
            <uib-tab-heading>
              <span><pr-icon icon="'layers'"></pr-icon></span> Stack
            </uib-tab-heading>

            <div style="padding: 20px">
              <edit-edge-stack-form
                ng-if="$ctrl.edgeGroups && $ctrl.stack && $ctrl.formValues.content !== null"
                edge-groups="$ctrl.edgeGroups"
                edge-stack="$ctrl.stack"
                is-submitting="$ctrl.state.actionInProgress"
                on-submit="($ctrl.deployStack)"
                on-editor-change="($ctrl.onEditorChange)"
                file-content="$ctrl.formValues.content"
                allow-kube-to-select-compose="$ctrl.allowKubeToSelectCompose"
              ></edit-edge-stack-form>
            </div>
          </uib-tab>
          <uib-tab index="1" classes="btn-sm">
            <uib-tab-heading>
              <span><pr-icon icon="'hard-drive'"></pr-icon></span> Environments
            </uib-tab-heading>

            <div style="margin-top: 25px">
              <edge-stack-environments-datatable></edge-stack-environments-datatable>
            </div>
          </uib-tab>
        </uib-tabset>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
