<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="cog"
    label="{{ 'Domain name' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="cog"
    label="{{ 'Enterprise tenant' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="cog"
    label="{{ 'Settings' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>
<div class="row">
  <div class="col-md-8 col-xs-12">
    <div class="card card--fullpage">
      <div class="card-header separator">
        <div class="card-title">
          {{ 'Domain name' | translate }}
        </div>
      </div>

      <div class="inner-scroll">
        <div
          class="card-block"
          ng-if="vm.customLoadBalancerOff"
        >
          <div class="legend form-block">
            {{ 'SSL certificate' | translate }}
          </div>
          <div
            class="m-b-16 m-t-16"
            ng-if="!vm.certificate"
          >
            <p
              class="m-b-16"
              translate
            >
              First you must upload the appropriate certificate by clicking "Upload certificate".
            </p>
            <p translate>Make sure that:</p>
            <ul>
              <li translate>The certificate is in a valid PKCS#12 (.pk12) format</li>
              <li translate>The certificate is not password protected</li>
              <li translate>
                You are using a wildcard certificate to enable creation of subtenants
              </li>
            </ul>
          </div>
          <div
            class="list-group"
            ng-if="vm.certificate"
          >
            <div class="list-group-item">
              <div class="list-item-body">
                <div class="row">
                  <div class="col-sm-3">
                    <label translate>Valid from</label>
                    <p>{{ vm.certificate.validFrom }}</p>
                  </div>
                  <div class="col-sm-3">
                    <label translate>Valid to</label>
                    <p>{{ vm.certificate.validTo }}</p>
                  </div>
                  <div class="col-sm-2">
                    <label translate>Common name</label>
                    <p>{{ vm.certificate.cn }}</p>
                  </div>
                  <div class="col-sm-3">
                    <label translate>Serial number</label>
                    <p>{{ vm.certificate.serialNumber }}</p>
                  </div>
                  <div class="col-sm-1 text-right">
                    <button
                      class="btn btn-danger btn-xs"
                      title="{{ 'Delete' | translate }}"
                      ng-click="vm.deleteCertificate()"
                      ng-disabled="vm.certificate.activated"
                    >
                      <i c8y-icon="times"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="card-block"
          ng-if="vm.certificate"
        >
          <div class="legend form-block">
            {{ 'Custom domain name' | translate }}
          </div>
          <div
            class="m-b-16 m-t-16"
            ng-if="vm.certificate.licensePresent"
          >
            <p translate>Before activating the custom domain name, make sure that:</p>
            <ul>
              <li translate>You uploaded a valid SSL certificate for your custom domain</li>
              <li translate>The common name (domain name) is not used by any other tenant</li>

              <li translate>
                The certificate is currently valid (validFrom in the past and validTo in the future)
              </li>
              <li translate>
                You added a CNAME entry to your DNS server. Make sure to remove all A entries for
                the wildcard domain. If your DNS service does not provide CNAME entries for wildcard
                certificates, please contact our support
              </li>
            </ul>
            <p class="m-b-16">
              <span
                c8y-guide-docs
                translate
              >
                For details refer to the
                <a c8y-guide-href="/docs/standard-tenant/standard-tenant-introduction">
                  user documentation
                </a>
                .
              </span>
            </p>
            <p
              class="m-b-8"
              translate
            >
              Changes in the name server need time to propagate and take effect. Wait approximately
              one hour before activating your domain here.
            </p>
            <p
              class="m-b-16"
              translate
            >
              After the activation is completed you will no longer be able to access your tenant
              with
              <code>{{ vm.domainName }}</code>
              , instead use your new custom domain name
              <code>{{ vm.newDomainName }}</code>
              .
            </p>
          </div>

          <p
            class="m-t-16 m-b-16"
            ng-if="!vm.certificate.licensePresent"
            translate
          >
            To activate your domain, you need a valid license. Please contact our support to install
            a license for your domain.
          </p>

          <button
            class="btn btn-primary"
            title="{{ 'Deactivate' | translate }}"
            type="button"
            ng-click="vm.deactivateCertificate()"
            ng-if="vm.certificate.activated"
          >
            {{ 'Deactivate' | translate }}
          </button>
          <button
            class="btn btn-primary"
            title="{{ 'Activate' | translate }}"
            type="button"
            ng-click="vm.activateCertificate()"
            ng-if="!vm.certificate.activated"
            ng-disabled="!vm.certificate.licensePresent || !vm.validWildcard"
          >
            {{ 'Activate' | translate }}
          </button>
        </div>
      </div>

      <div class="card-footer separator">
        <button
          class="btn btn-primary btn-form"
          type="button"
          ng-click="vm.showUploadModal()"
        >
          <span
            title="{{ 'Upload certificate' | translate }}"
            ng-if="!vm.certificate"
          >
            {{ 'Upload certificate' | translate }}
          </span>
          <span
            title="{{ 'Replace certificate' | translate }}"
            ng-if="vm.certificate"
          >
            {{ 'Replace certificate' | translate }}
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
