<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-thin-edge'"></i>
    <h4
      id="modal-title"
      translate
    >
      Try thin-edge.io
    </h4>
  </div>

  <c8y-stepper
    class="inner-scroll"
    [disableDefaultIcons]="{ edit: true, done: false }"
    [useStepLabelsAsTitlesOnly]="true"
    id="modal-body"
    [customClasses]="['m-l-80', 'm-r-80', 'p-t-16 ', 'p-b-16']"
    [disableProgressButtons]="true"
    linear
  >
    <cdk-step [label]="connectSmartphoneTitle">
      <div
        class="p-l-40 p-r-40"
        style="min-height: 420px"
      >
        <h4
          class="p-t-24 m-b-24 animated text-center fadeInUp"
          style="animation-delay: 0.3s"
          translate
        >
          Connect your thin-edge.io device
        </h4>
        <div class="row overflow-hidden d-flex">
          <div class="col-xs-7">
            <p
              class="m-b-16 lead animated fadeInUp"
              style="animation-delay: 0.5s"
              translate
            >
              To get more from Cumulocity, connect a thin-edge.io device or a container on your
              computer. This wizard will automatically connect it so you can use Cumulocity's device
              management features.
            </p>
            <div
              class="m-b-16 animated fadeInUp"
              style="animation-delay: 0.75s"
              translate
            >
              <p>Before you begin, please have one of the following ready:</p>
              <ul class="p-l-16">
                <li>A computer with Docker installed (to simulate a device), or</li>
                <li>A physical Linux IoT device.</li>
              </ul>
            </div>
            @if ((isCAAvailable | async) === false) {
              <div
                class="alert alert-warning animated fadeInUp"
                style="animation-delay: 0.85s"
              >
                <p
                  class="m-b-16"
                  translate
                >
                  Additionally, a trusted CA certificate must be available and enabled.
                </p>
                <button
                  class="btn btn-default btn-sm"
                  type="button"
                  (click)="manageCertificates()"
                  translate
                >
                  Manage certificates
                </button>
              </div>
            } @else {
              <p
                class="m-b-16 animated fadeInUp"
                style="animation-delay: 1s"
                translate
              >
                Click
                <strong>Next</strong>
                to continue.
              </p>
            }
          </div>
          <div
            class="col-xs-5 no-gutter animated zoomIn"
            style="animation-delay: 0.4s"
          >
            <c8y-thin-edge-illustration />
          </div>
        </div>
      </div>
      <c8y-stepper-buttons
        class="modal-footer d-block bg-component separator-top sticky-bottom"
        (onNext)="next($event)"
        (onCancel)="cancel()"
        [disabled]="(isCAAvailable | async) === false"
      ></c8y-stepper-buttons>
    </cdk-step>
    <cdk-step [label]="enterDeviceName">
      <div
        class="p-l-24 p-r-24"
        style="min-height: 420px"
      >
        <div class="p-l-40 p-r-40">
          <h4
            class="p-t-24 m-b-24 text-center animated fadeInUp"
            style="animation-delay: 0.3s"
          >
            {{ enterDeviceName | translate }}
          </h4>
          <p
            class="p-b-24 animated fadeInUp"
            style="animation-delay: 0.5s"
            translate
          >
            Choose a unique name for your device. We've generated a suggestion, which you can change
            if you like. This name identifies the device in your Cumulocity tenant.
          </p>
          <div
            class="animated fadeInUp"
            style="animation-delay: 0.7s"
          >
            <!-- Enter device name -->
            <div class="form-group">
              <label translate>Device name</label>
              <input
                class="form-control"
                [(ngModel)]="externalId"
              />
            </div>
          </div>

          <p
            class="animated fadeInUp"
            style="animation-delay: 0.9s"
            translate
          >
            Enter the device name and click
            <strong>Next</strong>.
          </p>
        </div>
      </div>
      <c8y-stepper-buttons
        class="modal-footer d-block bg-component separator-top sticky-bottom"
        (onBack)="back()"
        (onNext)="next($event)"
        (onCancel)="cancel()"
      ></c8y-stepper-buttons>
    </cdk-step>

    <cdk-step [label]="generateCodeTitle">
      @if (errorMessage?.length === 0) {
        <div
          class="p-l-24 p-r-24"
          style="min-height: 420px"
        >
          <div class="p-l-40 p-r-40">
            <h4
              class="text-center p-t-24 m-b-8 animated fadeInUp"
              style="animation-delay: 0.3s"
            >
              {{ generateCodeTitle | translate }}
            </h4>
            <p
              class="p-b-8 animated fadeInUp"
              style="animation-delay: 0.5s"
              translate
            >
              Choose the option that matches your setup. Copy the entire command and run it in the
              appropriate terminal on your computer or device.
            </p>
            <fieldset
              class="c8y-fieldset animated fadeInUp"
              style="animation-delay: 0.7s"
            >
              <legend
                class="d-flex a-i-center gap-4"
                title="Docker"
                data-cy="asset-properties-label"
              >
                <svg
                  class="max-width-fit"
                  style="max-height: 18px"
                  viewBox="0 0 512 512"
                >
                  <path
                    stroke="currentColor"
                    stroke-width="38"
                    d="M296 226h42m-92 0h42m-91 0h42m-91 0h41m-91 0h42m8-46h41m8 0h42m7 0h42m-42-46h42"
                  />
                  <path
                    fill="currentColor"
                    d="m472 228s-18-17-55-11c-4-29-35-46-35-46s-29 35-8 74c-6 3-16 7-31 7H68c-5 19-5 145 133 145 99 0 173-46 208-130 52 4 63-39 63-39"
                  />
                </svg>
                <span>Docker</span>
              </legend>
              <p
                class="m-b-8"
                translate
              >
                For connecting a simulated device, run this command on your computer with
                Docker`KEEP_ORIGINAL` installed. It will install the
                <a
                  href="https://github.com/thin-edge/tedge-demo-container"
                  target="_blank"
                  rel="noopener noreferrer"
                  >tedge-demo-container</a
                >.
              </p>
              <div class="input-group m-b-16">
                <div class="form-control">
                  <code
                    class="text-truncate"
                    title="{{ codeContainer || '-- code --' }}"
                  >
                    {{ codeContainer || '-- code --' }}
                  </code>
                </div>
                <div class="input-group-btn">
                  <button
                    class="btn btn-default"
                    [attr.aria-label]="'Copy' | translate"
                    tooltip="{{ 'Copy to clipboard' | translate }}"
                    placement="top"
                    type="button"
                    data-cy="asset-properties-edit-icon"
                    (click)="copyIt(codeContainer)"
                    [adaptivePosition]="false"
                    [delay]="500"
                  >
                    <i c8yIcon="copy"></i>
                  </button>
                </div>
              </div>
            </fieldset>
            <fieldset
              class="c8y-fieldset animated fadeInUp"
              style="animation-delay: 0.9s"
            >
              <legend
                class="d-flex a-i-center gap-4"
                title="{{ 'Device' | translate }}"
                data-cy="asset-properties-label"
              >
                <i c8yIcon="exchange"></i>
                {{ 'Device' | translate }}
              </legend>
              <p
                class="p-b-8"
                translate
              >
                For connecting a physical Linux IoT device, run this command in the device's
                terminal.
              </p>

              <div class="input-group m-b-16">
                <div class="form-control">
                  <code
                    class="text-truncate"
                    title="{{ codeDevice || '-- code --' }}"
                  >
                    {{ codeDevice || '-- code --' }}
                  </code>
                </div>
                <div class="input-group-btn">
                  <button
                    class="btn btn-default"
                    [attr.aria-label]="'Copy' | translate"
                    tooltip="{{ 'Copy to clipboard' | translate }}"
                    placement="top"
                    type="button"
                    data-cy="asset-properties-edit-icon"
                    (click)="copyIt(codeDevice)"
                    [adaptivePosition]="false"
                    [delay]="500"
                  >
                    <i c8yIcon="copy"></i>
                  </button>
                </div>
              </div>
            </fieldset>
          </div>
        </div>
        <div class="modal-footer d-block bg-component separator-top sticky-bottom animated fadeIn">
          @if (isCodeRequestPending) {
            <button
              class="btn btn-default"
              title="{{ 'Cancel' | translate }}"
              type="button"
              (click)="cancel()"
            >
              {{ 'Cancel' | translate }}
            </button>
            <button
              class="btn btn-primary btn-pending"
              title="{{ waitOrRetry | translate }}"
              type="button"
            >
              {{ waitOrRetry | translate }}
            </button>
          }

          @if (!isCodeRequestPending && (codeContainer.length || codeDevice.length)) {
            <button
              class="btn btn-primary"
              title="{{ 'Complete' | translate }}"
              type="button"
              (click)="onComplete()"
            >
              {{ 'Complete' | translate }}
            </button>
          }
        </div>
      }
    </cdk-step>

    <cdk-step [label]="resultTitle">
      <!-- SUCCESS STATE -->
      @if (success) {
        <div
          class="p-t-24"
          style="min-height: 420px"
        >
          <div class="p-l-24 p-r-24 text-center">
            <c8y-operation-result
              type="success"
              text="Setup completed"
              [size]="96"
              [vertical]="true"
            ></c8y-operation-result>
            <div class="p-l-40 p-r-40">
              <h4
                class="m-b-16 animated fadeInUp"
                style="animation-delay: 0.5s"
              >
                <strong translate>Device enrollment completed</strong>
              </h4>
              <p
                class="p-b-8 lead animated fadeInUp text-balance"
                style="animation-delay: 0.75s"
                translate
              >
                Your device is now connected and sending data to your Cumulocity tenant.
              </p>
              <p
                class="animated fadeInUp text-balance"
                style="animation-delay: 0.75s"
                translate
              >
                Click
                <strong>Close</strong>
                to view your newly registered device in the device list.
              </p>
            </div>
          </div>
        </div>
        <div class="modal-footer d-block bg-component separator-top sticky-bottom text-center">
          <div
            class="text-center animated fadeInUp"
            style="animation-delay: 1s"
          >
            <button
              class="btn btn-default"
              title="{{ 'Close' | translate }}"
              type="button"
              (click)="close()"
            >
              {{ 'Close' | translate }}
            </button>
          </div>
        </div>
      }

      <!-- ERROR STATE -->
      @if (success === false && errorMessage?.length > 0) {
        <div
          class="p-t-24"
          style="min-height: 420px"
        >
          <div class="p-l-24 p-r-24 text-center">
            <c8y-operation-result
              type="error"
              text="Setup failed"
              [size]="96"
              [vertical]="true"
            ></c8y-operation-result>
            <div class="p-l-40 p-r-40">
              <h4
                class="m-b-16 animated fadeInUp"
                style="animation-delay: 0.5s"
              >
                <strong>{{ 'Device enrollment failed' | translate }}</strong>
              </h4>
              @if (errorMessage?.length) {
                <div
                  class="animated fadeInUp"
                  style="animation-delay: 0.75s"
                >
                  <div class="alert alert-danger">
                    <p class="p-b-16 text-medium">
                      {{ 'The following error occurred:' | translate }}
                    </p>
                    <pre class="inner-scroll">{{ errorMessage }}</pre>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>
        <div class="modal-footer d-block bg-component separator-top sticky-bottom text-center">
          <div
            class="animated fadeIn col-xs-4 text-center fit-w"
            style="animation-delay: 1s"
          >
            <button
              class="btn btn-default"
              title="{{ 'Close' | translate }}"
              type="button"
              (click)="cancel()"
            >
              {{ 'Close' | translate }}
            </button>
            <button
              class="btn btn-primary"
              title="{{ 'Retry' | translate }}"
              type="button"
              (click)="retry()"
            >
              {{ 'Retry' | translate }}
            </button>
          </div>
        </div>
      }
    </cdk-step>
  </c8y-stepper>
</div>