<kubernetes-view-header title="Configuration details" state="kubernetes.configurations.configuration" view-ready="ctrl.state.viewReady">
  <a ui-sref="kubernetes.resourcePools">Namespaces</a> &gt;
  <a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a> &gt;
  <a ui-sref="kubernetes.configurations">Configurations</a> &gt; {{ ctrl.configuration.Name }}
</kubernetes-view-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> <i class="fa fa-file-code space-right" aria-hidden="true"></i> Configuration </uib-tab-heading>
              <div style="padding: 20px;">
                <table class="table" data-cy="k8sConfigDetail-configTable">
                  <tbody>
                    <tr>
                      <td>Name</td>
                      <td>
                        {{ 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>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>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>
                <i class="fa fa-history space-right" aria-hidden="true"></i> Events
                <div ng-if="ctrl.hasEventWarnings()">
                  <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                  {{ ctrl.state.eventWarningCount }} warning(s)
                </div>
              </uib-tab-heading>
              <kubernetes-events-datatable
                title-text="Events"
                title-icon="fa-history"
                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> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
              <div style="padding-right: 25px;" 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"
                  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 configuration</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)"> <i class="fa fa-copy space-right" aria-hidden="true"></i>Copy </span>
                      <span id="copyValueNotification_{{ $index }}" style="display: none; color: #23ae89; margin-left: 5px;" class="small">
                        <i class="fa fa-check" aria-hidden="true"></i> 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="fa-laptop-code"
      >
      </kubernetes-integrated-applications-datatable>
    </div>
  </div>
</div>
