@if (isLoading()) {
  <c8y-loading />
} @else if (selectedEvent(); as event) {
  <!-- Header with event text -->
  <div
    class="card-header p-24 m-b-16 bg-component separator-bottom sticky-top"
    style="margin: 0 -24px"
  >
    <h4
      class="m-0"
      data-cy="c8y-event-details-title"
    >
      {{ event.text | translate }}
    </h4>
  </div>

  <c8y-icon-panel [sections]="[]">
    <!-- Source section -->
    <div
      class="col-xs-12 col-md-6 d-flex p-b-8"
      data-cy="c8y-event-details--source-wrapper"
    >
      <div class="border-all fit-w d-flex">
        <div class="p-8">
          <i
            class="icon-24 m-t-4 stroked-icon status"
            c8yIcon="contactless-payment"
          ></i>
        </div>
        <div class="p-t-8 p-b-8 p-r-8 min-width-0">
          <p class="text-label-small m-b-0 m-r-8">{{ 'Source' | translate }}</p>
          <p class="small">
            @if (selectedEventSource(); as source) {
              <button
                class="btn-link p-0 m-r-8 text-left text-truncate"
                [title]="source.name || event.source?.id"
                type="button"
                [routerLink]="source | assetLink"
              >
                <i c8yIcon="exchange"></i>
                {{ source.name || event.source?.id }}
              </button>
            } @else {
              <span class="text-muted">{{ event.source?.id }}</span>
            }
          </p>
        </div>
      </div>
    </div>

    <!-- Type section -->
    <div
      class="col-xs-12 col-md-6 d-flex p-b-8"
      data-cy="c8y-event-details--type-wrapper"
    >
      <div class="border-all fit-w d-flex">
        <div class="p-8">
          <span
            class="circle-icon-wrapper"
            [style.background-color]="typeColor()"
          >
            <i
              class="stroked-icon"
              [c8yIcon]="EVENT_ICON"
            ></i>
          </span>
        </div>
        <div class="p-t-8 p-b-8 p-r-8 min-width-0">
          <p class="text-label-small m-b-0 m-r-8">{{ 'Type' | translate }}</p>
          <p
            class="small text-truncate"
            [title]="event.type"
          >
            <code>{{ event.type }}</code>
          </p>
        </div>
      </div>
    </div>

    <!-- Time, Server creation time, and Last updated -->
    <div class="col-xs-12 col-md-12 p-b-16">
      <div class="border-all fit-w d-flex">
        <div class="p-8">
          <i
            class="icon-24 text-gray-dark m-t-4"
            c8yIcon="calendar"
            data-cy="c8y-event-details--calendar-icon"
          ></i>
        </div>
        <div class="p-t-8 p-b-0 p-r-8 flex-grow">
          <div class="content-flex-50">
            <!-- Device time -->
            <div
              class="col-4 p-b-8"
              data-cy="c8y-event-details--time-wrapper"
            >
              <p class="text-label-small m-b-0 m-r-8">{{ 'Time' | translate }}</p>
              <p class="small">
                {{ event.time | c8yDate: 'medium' }}
                <button
                  class="btn-help btn-help--sm"
                  [attr.aria-label]="'Help' | translate"
                  [popover]="TIME_HELP_TEXT | translate"
                  placement="right"
                  triggers="focus"
                  container="body"
                  type="button"
                ></button>
              </p>
            </div>
            <!-- Server creation time -->
            <div
              class="col-4 p-b-8"
              data-cy="c8y-event-details--creation-time-wrapper"
            >
              <p class="text-label-small m-b-0 m-r-8">
                {{ 'Server creation time' | translate }}
              </p>
              <p class="small">
                {{ event.creationTime | c8yDate: 'medium' }}
                <button
                  class="btn-help btn-help--sm"
                  [attr.aria-label]="'Help' | translate"
                  [popover]="CREATION_TIME_HELP_TEXT | translate"
                  placement="right"
                  triggers="focus"
                  container="body"
                  type="button"
                ></button>
              </p>
            </div>
            <!-- Last updated -->
            @if (event['lastUpdated']) {
              <div
                class="col-4 p-b-8"
                data-cy="c8y-event-details--last-updated-wrapper"
              >
                <p class="text-label-small m-b-0 m-r-8">
                  {{ 'Last updated' | translate }}
                </p>
                <p class="small">
                  {{ event['lastUpdated'] | c8yDate: 'medium' }}
                </p>
              </div>
            }
          </div>
        </div>
      </div>
    </div>

    <!-- Custom fragments section -->
    @if (customFragments(); as fragments) {
      <div
        class="col-xs-12 col-md-12 p-b-16"
        data-cy="c8y-event-details--custom-fragments-wrapper"
      >
        <div class="border-all fit-w d-flex">
          <div class="p-8">
            <i
              class="icon-24 text-gray-dark m-t-4"
              c8yIcon="outgoing-data"
            ></i>
          </div>
          <div
            class="p-t-8 p-b-0 p-r-8 flex-grow"
            data-cy="event-details-custom-data"
          >
            <ul class="list-unstyled small m-b-0">
              @for (item of fragments | keyvalue; track item.key) {
                <li
                  class="p-t-4 p-b-4 separator-bottom"
                  data-cy="event-details-custom-data-item"
                >
                  <label class="small m-b-4 text-label-small d-block">
                    {{ item.key | humanize }}
                  </label>
                  @if (isComplexValue(item.value)) {
                    <pre class="m-b-0"><code>{{ item.value | json }}</code></pre>
                  } @else {
                    <span>{{ item.value }}</span>
                  }
                </li>
              }
            </ul>
          </div>
        </div>
      </div>
    }

    <!-- Attachment section -->
    @if (hasBinary()) {
      <div
        class="col-xs-12 col-md-12 p-b-16"
        data-cy="c8y-event-details--attachment-wrapper"
      >
        <div class="border-all fit-w d-flex">
          <div class="p-8">
            <i
              class="icon-24 text-gray-dark m-t-4"
              [c8yIcon]="binaryIcon()"
            ></i>
          </div>
          <div class="p-t-8 p-b-8 p-r-8 flex-grow">
            <p class="text-label-small m-b-4 m-r-8">{{ 'Attachment' | translate }}</p>

            <!-- Image preview -->
            @if (binaryPreviewLoading()) {
              <div class="m-b-16">
                <c8y-loading></c8y-loading>
              </div>
            } @else if (binaryPreviewUrl(); as previewUrl) {
              @let imgAltText = 'Attachment preview' | translate;
              <div class="m-b-16">
                <img
                  class="max-width-100"
                  [src]="previewUrl"
                  [alt]="binaryInfo()?.name || imgAltText"
                  data-cy="c8y-event-details--attachment-preview"
                />
              </div>
            } @else if (binaryPreviewFailed()) {
              <p
                class="text-muted small m-b-8"
                translate
              >
                Preview unavailable.
              </p>
            }

            <!-- Download button -->
            @if (canDownload()) {
              <button
                class="btn btn-primary btn-xs"
                [title]="'Download' | translate"
                [attr.aria-busy]="isDownloading()"
                type="button"
                [disabled]="isDownloading()"
                (click)="downloadBinary()"
                data-cy="c8y-event-details--download-btn"
              >
                <i [c8yIcon]="isDownloading() ? 'spinner' : 'download'"></i>
                <span>{{ 'Download' | translate }}</span>
              </button>
            }
          </div>
        </div>
      </div>
    }
  </c8y-icon-panel>
}