<div
  class="welcome-widget"
  tabindex="0"
  data-cy="welcome-widget"
>
  @if (isLoading) {
    <div class="p-16 text-center">
      <c8y-loading></c8y-loading>
    </div>
  } @else {
    <div
      class="d-flex fit-h"
      data-cy="quick-links-content"
    >
      <div
        class="col-xs-12 col-md-6 a-s-stretch p-24"
        data-cy="content-column"
      >
        <h2 class="text-light">{{ 'Welcome to Device Management' | translate }}</h2>
        <p class="text-16 text-light p-t-16 p-b-24">{{ welcomeMessage | translate }}</p>
        <div
          class="card-group interact-grid tight-grid"
          data-cy="quick-links-grid"
        >
          @for (link of quickLinks; track link.url) {
            @let linkLabel = config?.translateLinkLabels ? (link.label | translate) : link.label;
            <div class="col-sm-4 col-xs-6">
              <a
                class="btn-clean card text-pre-normal"
                [title]="linkLabel"
                data-cy="quick-link"
                [href]="link.url"
                [target]="link.newTab ? '_blank' : '_self'"
                [attr.rel]="link.newTab ? 'noopener noreferrer' : null"
                c8yProductExperience
                [actionName]="'welcomeWidgetClicked'"
                [actionData]="{ link: link.label }"
              >
                <div class="card-block text-center">
                  <i
                    class="c8y-icon-duocolor icon-32"
                    [c8yIcon]="link.icon"
                    data-cy="quick-link-icon"
                  ></i>
                  <p
                    class="text-muted"
                    [title]="linkLabel"
                    data-cy="quick-link-label"
                  >
                    {{ linkLabel }}
                  </p>
                </div>
              </a>
            </div>
          }
        </div>
      </div>
      <div
        class="welcome-illustration a-s-stretch"
        data-cy="welcome-illustration"
      >
        <c8y-dm-welcome-illustration />
      </div>
    </div>
  }
</div>