@let isSideNavCollapsed = navService.sideNavCollapsedSignal();

@if (!link()) {
  <div class="side-nav-item" [ngClass]="{'closed': isSideNavCollapsed, 'active': highlighted()}">
    <ng-container [ngTemplateOutlet]="inner" />
  </div>
} @else {
  @if (external()) {
    <a [id]="id()" class="side-nav-item" [href]="link()" [ngClass]="{'closed': isSideNavCollapsed, 'active': highlighted()}" rel="noopener noreferrer" target="_blank">
      <ng-container [ngTemplateOutlet]="inner" />
    </a>
  } @else {
    @if (queryParams()) {
      <a [id]="id()" class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': isSideNavCollapsed, 'active': highlighted()}" (click)="openLink()">
        <ng-container [ngTemplateOutlet]="inner" />
      </a>
    } @else if (fragment()) {
      <a [id]="id()" class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': isSideNavCollapsed, 'active': highlighted()}" [routerLink]="link()" [fragment]="fragment()">
        <ng-container [ngTemplateOutlet]="inner" />
      </a>
    } @else {
      <a [id]="id()" class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': isSideNavCollapsed, 'active': highlighted()}" [routerLink]="link()" [queryParams]="queryParams()">
        <ng-container [ngTemplateOutlet]="inner" />
      </a>
    }
  }
}

<ng-template #inner>
    <div class="active-highlight"></div>
    @if (editMode()) {
      <span class="phone-hidden" title="{{title()}}">
        <div>
          <i class="fa fa-grip-vertical drag-handle" aria-hidden="true"></i>
        </div>
      </span>
    } @else if (!noIcon()) {
      <span class="phone-hidden" title="{{title()}}">
        <div>
          @let imageUrlValue = imageUrl();
          @if (imageUrlValue) {
            <app-image [imageUrl]="imageUrlValue" width="20px" height="20px" />
          } @else {
            <i class="fa {{icon()}}" aria-hidden="true"></i>
          }
        </div>
      </span>
    }

    <span class="side-nav-text">
        <div>
          {{title()}}
          @if (badgeCount() > 0) {
            <span class="badge bg-danger rounded-pill ms-2">{{badgeCount()}}</span>
          }
        </div>
    </span>
    <span class="card-actions">
        <ng-content select="[actions]" />
    </span>
</ng-template>