<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'" feather="true"></pr-icon></span> Stack
            </uib-tab-heading>

            <div style="padding: 20px">
              <edit-edge-stack-form
                edge-groups="$ctrl.edgeGroups"
                model="$ctrl.formValues"
                action-in-progress="$ctrl.state.actionInProgress"
                submit-action="$ctrl.deployStack"
                is-editor-dirty="$ctrl.state.isEditorDirty"
              ></edit-edge-stack-form>
            </div>
          </uib-tab>
          <uib-tab index="1" classes="btn-sm">
            <uib-tab-heading>
              <span><pr-icon icon="'hard-drive'" feather="true"></pr-icon></span> Environments
            </uib-tab-heading>

            <div style="margin-top: 25px">
              <edge-stack-endpoints-datatable
                title-text="Environments Status"
                dataset="$ctrl.endpoints"
                title-icon="hard-drive"
                table-key="edgeStackEndpoints"
                order-by="Name"
                retrieve-page="$ctrl.getPaginatedEndpoints"
                edge-stack-id="$ctrl.stack.Id"
                endpoints-status="$ctrl.stack.Status"
              >
              </edge-stack-endpoints-datatable>
            </div>
          </uib-tab>
        </uib-tabset>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
