<page-header
  ng-if="ctrl.state.viewReady"
  title="'Configuration details'"
  breadcrumbs="[
    { label:'Namespaces', link:'kubernetes.resourcePools' },
    {
      label:ctrl.configuration.Namespace,
      link: 'kubernetes.resourcePools.resourcePool',
      linkParams:{ id: ctrl.configuration.Namespace }
    },
    { label:'ConfigMaps and Secrets', link:'kubernetes.configurations' },
    ctrl.configuration.Name,
     ]"
  reload="true"
>
</page-header>

<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="ctrl.state.viewReady">
  <div class="row">
    <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" select="ctrl.selectTab(0)" data-cy="k8sConfigDetail-configTab">
              <uib-tab-heading>
                <pr-icon icon="'svg-filecode'"></pr-icon>
                Configuration
              </uib-tab-heading>
              <div style="padding: 20px">
                <table class="table" data-cy="k8sConfigDetail-configTable">
                  <tbody>
                    <tr>
                      <td class="!pl-0 !border-none w-[40%]">Name</td>
                      <td class="!border-none">
                        {{ ctrl.configuration.Name }}
                        <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.configuration.IsRegistrySecret">system</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="!pl-0">Namespace</td>
                      <td>
                        <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a>
                        <span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.isSystemNamespace()">system</span>
                      </td>
                    </tr>
                    <tr>
                      <td class="!pl-0">Configuration type</td>
                      <td>
                        {{ ctrl.configuration.Type | kubernetesConfigurationTypeText }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </uib-tab>
            <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)" data-cy="k8sConfigDetail-eventsTab">
              <uib-tab-heading>
                <pr-icon icon="'svg-clockrewind'"></pr-icon>
                Events
                <div ng-if="ctrl.hasEventWarnings()">
                  <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                  {{ ctrl.state.eventWarningCount }} warning(s)
                </div>
              </uib-tab-heading>
              <kubernetes-events-datatable
                title-text="Events"
                title-icon="svg-clockrewind"
                dataset="ctrl.events"
                table-key="kubernetes.configuration.events"
                order-by="Date"
                reverse-order="true"
                loading="ctrl.state.eventsLoading"
                refresh-callback="ctrl.getEvents"
              >
              </kubernetes-events-datatable>
            </uib-tab>
            <uib-tab index="2" ng-if="ctrl.configuration.Yaml" classes="btn-sm" select="ctrl.showEditor()" data-cy="k8sConfigDetail-yamlTab">
              <uib-tab-heading>
                <pr-icon icon="'code'" feather="true"></pr-icon>
                YAML
              </uib-tab-heading>
              <div class="!pt-5 px-5" ng-if="ctrl.state.showEditorTab">
                <kubernetes-yaml-inspector key="configuration-yaml" data="ctrl.configuration.Yaml"> </kubernetes-yaml-inspector>
              </div>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <form ng-if="!ctrl.isSystemConfig()" class="form-horizontal" name="kubernetesConfigurationCreationForm" autocomplete="off">
            <kubernetes-configuration-data
              ng-if="ctrl.formValues"
              form-values="ctrl.formValues"
              is-valid="ctrl.state.isDataValid"
              is-creation="false"
              is-editor-dirty="ctrl.state.isEditorDirty"
            ></kubernetes-configuration-data>

            <!-- summary -->
            <kubernetes-summary-view
              ng-if="!(!ctrl.isFormValid() || !kubernetesConfigurationCreationForm.$valid || ctrl.state.actionInProgress)"
              form-values="ctrl.formValues"
            ></kubernetes-summary-view>

            <!-- actions -->
            <div class="col-sm-12 form-section-title" style="margin-top: 10px"> Actions </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="button"
                  class="btn btn-primary btn-sm !ml-0"
                  ng-disabled="!ctrl.isFormValid() || !kubernetesConfigurationCreationForm.$valid || ctrl.state.actionInProgress"
                  ng-click="ctrl.updateConfiguration()"
                  button-spinner="ctrl.state.actionInProgress"
                  data-cy="k8sConfigDetail-updateConfig"
                >
                  <span ng-hide="ctrl.state.actionInProgress">Update {{ ctrl.configuration.Type | kubernetesConfigurationTypeText }}</span>
                  <span ng-show="ctrl.state.actionInProgress">Update in progress...</span>
                </button>
              </div>
            </div>
            <!-- !actions -->
          </form>
          <div ng-if="ctrl.isSystemConfig()">
            <div class="col-sm-12 form-section-title" style="margin-top: 10px"> Data </div>
            <table class="table">
              <tbody>
                <tr class="text-muted">
                  <td style="width: 10%; border-top: none">Key</td>
                  <td style="width: 90%; border-top: none">Value</td>
                </tr>

                <tr ng-repeat="item in ctrl.formValues.Data track by $index">
                  <td>{{ item.Key }}</td>
                  <td>
                    <div style="white-space: pre-wrap">{{ item.Value }}</div>
                    <div style="margin-top: 2px">
                      <span class="btn btn-primary btn-xs" ng-click="ctrl.copyConfigurationValue($index)">
                        <pr-icon icon="'copy'" feather="true" class-name="'mr-0.5'"></pr-icon>Copy
                      </span>
                      <span id="copyValueNotification_{{ $index }}" style="display: none; color: #23ae89; margin-left: 5px" class="small">
                        <pr-icon icon="'check'" feather="true"></pr-icon> copied
                      </span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <div class="row" ng-if="ctrl.configuration.Used">
    <div class="col-sm-12">
      <kubernetes-integrated-applications-datatable
        dataset="ctrl.configuration.Applications"
        table-key="kubernetes.configurations.applications"
        order-by="Name"
        refresh-callback="ctrl.getApplications"
        title-text="Applications using this configuration"
        title-icon="svg-laptopcode"
      >
      </kubernetes-integrated-applications-datatable>
    </div>
  </div>
</div>
