@if (!!(helpService.contextHelp | async)) {
  <c8y-action-bar-item
    [placement]="'right'"
    itemClass="pull-right m-l-md-8"
    [priority]="priority"
  >
    <button
      class="btn-help hidden-xs"
      [attr.aria-label]="'About this page' | translate"
      tooltip="{{ 'About this page' | translate }}"
      placement="left"
      container="body"
      aria-controls="collapseHelp"
      [attr.aria-expanded]="!isCollapsed"
      type="button"
      data-cy="help--help-btn"
      [delay]="750"
      (click)="toggle()"
      c8yProductExperience
      [actionName]="isCollapsed ? 'helpOpened' : 'helpClosed'"
      [actionData]="{ src: src }"
    ></button>
    <button
      class="btn btn-link visible-xs"
      title="{{ 'About this page' | translate }}"
      aria-controls="collapseHelp"
      [attr.aria-expanded]="!isCollapsed"
      type="button"
      (click)="toggle()"
      c8yProductExperience
      [actionName]="isCollapsed ? 'helpOpened' : 'helpClosed'"
      [actionData]="{ src: src }"
    >
      <i
        class="text-info"
        c8yIcon="help-outline"
      ></i>
      {{ 'About this page' | translate }}
    </button>
  </c8y-action-bar-item>
}

<div
  class="c8y-help-drawer"
  id="collapseHelp"
  [collapse]="isCollapsed"
  [isAnimated]="true"
  (collapsed)="onCollapsed()"
>
  <div
    [ngClass]="{ 'c8y-help-drawer-block': isInit }"
    #docOutlet
    data-cy="c8y-help--c8y-help-drawer-block"
  >
    @if (isLoading) {
      <c8y-loading></c8y-loading>
    } @else {
      <div class="d-flex">
        <i
          class="c8y-icon-duocolor icon-48"
          [c8yIcon]="!hasError ? icon : 'unlink'"
          [ngClass]="{ 'text-warning': hasError, 'text-muted': !hasError }"
        ></i>
        @if (!hasError) {
          <div class="p-l-16 flex-grow">
            @if (
              !helpService.isSupportedLanguage() &&
              !showLangWarning &&
              !helpService.isWarningAlertViewed
            ) {
              <div class="alert alert-info m-b-16">
                <button
                  class="close"
                  [attr.aria-label]="'Close' | translate"
                  type="button"
                  (click)="
                    showLangWarning = !showLangWarning;
                    helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed
                  "
                >
                  <span aria-hidden="true">×</span>
                  <span class="sr-only">Close</span>
                </button>
                <p>
                  {{ 'Help content is only available in English.' | translate }}
                </p>
              </div>
            }
            <h4 class="text-bold text-primary p-t-16 m-b-16">
              {{ title }}
            </h4>
            <div
              class="help-content"
              id="helpContent"
              [innerHTML]="sectionContent"
              data-cy="help--c8y-help-content"
            ></div>
          </div>
        }

        @if (hasError) {
          <div class="p-l-16 p-t-16 flex-grow">
            <h4
              class="text-bold m-b-16"
              translate
            >
              Content couldn't be loaded.
            </h4>
            <div class="help-content">
              <p translate>Check internet connection or reload page.</p>
            </div>
          </div>
        }
      </div>
    }
  </div>
  @if (!isLoading && !hasError) {
    <div
      class="c8y-help-drawer-footer animated fadeIn"
      style="animation-delay: 0.35s"
      data-cy="c8y-help--c8y-help-drawer-footer"
    >
      <button
        class="btn btn-default"
        [title]="'Close help' | translate"
        aria-controls="collapseHelp"
        [attr.aria-expanded]="!isCollapsed"
        type="button"
        data-cy="c8y-help--close-btn"
        (click)="toggle()"
        translate
      >
        Close
      </button>
      <a
        class="btn btn-primary"
        href="{{ hasError ? getUrl() : getUrl(src) }}"
        target="_blank"
        data-cy="c8y-help--user-guide"
        rel="noopener noreferrer"
      >
        @if (!hasError) {
          <span translate>
            Open the
            <span>user documentation</span>
          </span>
        } @else {
          <span translate>
            Check the
            <span>user documentation</span>
          </span>
        }
      </a>
    </div>
  }
</div>