<div class="search-page">
  <div class="search-header">
    <mat-form-field
      class="search-field"
      appearance="outline"
      subscriptSizing="dynamic"
    >
      <mat-label>{{ T.F.SEARCH_BAR.PLACEHOLDER | translate }}</mat-label>
      <input
        #inputEl
        matInput
        [formControl]="searchForm"
        [placeholder]="T.F.SEARCH_BAR.PLACEHOLDER | translate"
      />
      @if (searchForm.value) {
        <button
          mat-icon-button
          matSuffix
          (click)="clearSearch()"
          [attr.aria-label]="T.G.CLEAR | translate"
        >
          <mat-icon>clear</mat-icon>
        </button>
      }
    </mat-form-field>

    <mat-checkbox
      class="include-completed-toggle"
      [formControl]="includeCompletedForm"
    >
      {{ T.F.SEARCH_BAR.INCLUDE_COMPLETED | translate }}
    </mat-checkbox>
  </div>

  <div class="search-results">
    @let results = filteredResults$ | async;
    @if (results && results.length > 0) {
      <mat-list>
        @for (item of results; track trackByFn($index, item)) {
          <mat-list-item (click)="navigateToItem(item)">
            <div class="search-result-content">
              <div class="task-info">
                @if (item.parentId && item.parentTitle) {
                  <mat-icon class="subtask-icon">subdirectory_arrow_right</mat-icon>
                  <span class="subtask-breadcrumb">{{ item.parentTitle }}</span>
                  <mat-icon class="subtask-icon">chevron_right</mat-icon>
                }
                <div
                  class="task-title"
                  [class.task-archived]="item.isArchiveTask"
                  [class.task-done]="item.isDone"
                  [class.task-subtask]="!!item.parentTitle"
                >
                  {{ item?.title }}
                </div>
                <div class="task-icons">
                  @if (item.ctx) {
                    <tag
                      [tag]="item.ctx"
                      class="context-tag"
                    ></tag>
                  }
                  @if (item.issueType) {
                    <mat-icon
                      [svgIcon]="item.issueType | issueIcon"
                      class="issue-icon"
                    ></mat-icon>
                  }
                  @if (item.isNote) {
                    <mat-icon class="issue-icon">comment</mat-icon>
                  }
                  @if (item.isArchiveTask) {
                    <mat-icon class="archive-icon">archive</mat-icon>
                    <button
                      (click)="viewArchivedTaskDetails(item, $event)"
                      [title]="T.F.WORKLOG.CMP.VIEW_TASK_DETAILS | translate"
                      aria-label="view details"
                      mat-icon-button
                      class="view-details-btn"
                    >
                      <mat-icon>info</mat-icon>
                    </button>
                  }
                </div>
              </div>
            </div>
          </mat-list-item>
        }
      </mat-list>
    } @else if (searchForm.value && searchForm.value.trim()) {
      <div class="no-results">
        <mat-icon>search_off</mat-icon>
        <p>{{ T.F.SEARCH_BAR.NO_RESULTS | translate }}</p>
      </div>
    } @else {
      <div class="search-prompt">
        <mat-icon>search</mat-icon>
        <p>{{ T.F.SEARCH_BAR.INFO | translate }}</p>
      </div>
    }
  </div>
</div>
