<div class="resourcelist">
  <mat-card style="border-radius: unset">
    <mat-card-title>
      <div class="title-block">
        <div style="width: 50px">
          <button
            mat-icon-button
            (click)="close()"
            matTooltip="Close Vessels List"
            matTooltipPosition="right"
          >
            <mat-icon>arrow_back</mat-icon>
          </button>
        </div>
        <div style="flex: 1 1 auto; padding-top: 7px">Vessels</div>
      </div>
    </mat-card-title>
    <mat-card-content>
      <div style="display: flex">
        <div style="flex: 1 1 auto; padding-left: 3px">
          <mat-form-field floatLabel="always" style="width: 180px">
            <mat-label>Type to filter list</mat-label>
            <input
              #ftext
              type="text"
              matInput
              [disabled]="app.config.selections.aisFilterByShipType"
              [value]="filterText"
              (keyup)="filterKeyUp(ftext.value)"
            />
            @if(filterText) {
            <button matSuffix mat-icon-button (click)="filterKeyUp('')">
              <mat-icon>close</mat-icon>
            </button>
            }
          </mat-form-field>
        </div>
        <div>
          <button
            mat-icon-button
            (click)="initItems()"
            matTooltip="Reload Vessels"
            matTooltipPosition="below"
            [disabled]="app.config.selections.aisFilterByShipType"
          >
            <mat-icon>refresh</mat-icon>
          </button>
        </div>
        <div>
          <mat-checkbox
            #selall
            [disabled]="app.config.selections.aisFilterByShipType"
            [checked]="allSel"
            [indeterminate]="someSel"
            (change)="toggleAll($event.checked)"
            [matTooltip]="(!selall.checked || someSel) ? 'Select All' : 'Deselect All'"
            matTooltipPosition="below"
          >
          </mat-checkbox>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions
      class="vessel-filter"
      [class.stacked]="app.featureFlags().buddyList"
    >
      <span class="filter-label">Filter:</span>
      <div class="filter-toggles">
        <mat-slide-toggle
          [checked]="app.config.selections.aisFilterByShipType"
          (change)="toggleFilterType($event.checked)"
        >
          Ship Type
        </mat-slide-toggle>
        <mat-slide-toggle
          [checked]="onlyIMO"
          (change)="shipTypeSelect($event.checked, -999)"
        >
          IMO Only
        </mat-slide-toggle>
        @if (app.featureFlags().buddyList) {
        <mat-slide-toggle
          [checked]="onlyBuddies"
          (change)="shipTypeSelect($event.checked, -998)"
        >
          Buddies Only
        </mat-slide-toggle>
        }
      </div>
    </mat-card-actions>
  </mat-card>

  <div class="resources vessels" [class.buddies]="app.featureFlags().buddyList">
    @if(this.app.sIsFetching()) {
    <mat-progress-bar mode="query"></mat-progress-bar>
    } @if (app.config.selections.aisFilterByShipType) {
    <mat-card>
      <mat-card-content>
        @for (i of shipTypes; track i.id) {
        <div style="display: flex">
          <div style="width: 35px">
            <mat-icon [svgIcon]="i.icon"></mat-icon>
          </div>
          <div style="flex: 1 1 auto; padding-left: 7px">
            <b>
              {{i.description}}
              <span style="font-style: italic; font-size: smaller">
                @if(i.id !==0){ ({{i.id}}-{{i.id + 9}}) }
              </span>
            </b>
          </div>
          <div style="text-align: right">
            <mat-checkbox
              [checked]="i.selected"
              (change)="shipTypeSelect($event.checked, i.id)"
              matTooltip="Show in Map"
              matTooltipPosition="left"
            >
            </mat-checkbox>
          </div>
        </div>
        }
      </mat-card-content>
    </mat-card>

    } @else {
    <cdk-virtual-scroll-viewport class="vscroller" itemSize="48">
      <mat-card
        *cdkVirtualFor="let r of filteredList(); let i= index;"
        style="border-bottom: silver 1px outset; border-radius: unset"
      >
        <mat-card-content>
          <div style="display: flex">
            <div style="flex: 1 1 auto; padding-left: 7px">
              <a
                style="cursor: pointer"
                (click)="itemProperties(r[0])"
                matTooltip="Vessel Properties"
                matTooltipPosition="right"
              >
                <mat-icon [svgIcon]="getShipIcon(r[1].type?.id )"></mat-icon>
                <b
                  >{{(r[1].name) ? r[1].name : (r[1].mmsi) ? r[1].mmsi :
                  'Vessel-' + i}}</b
                >
              </a>
            </div>
            <div style="text-align: right">
              <mat-checkbox
                [checked]="r[2]"
                (change)="itemSelect($event.checked, r[0])"
                matTooltip="Show in Map"
                matTooltipPosition="left"
              >
              </mat-checkbox>
            </div>
          </div>
        </mat-card-content>
        <mat-card-actions>
          <div style="display: flex; flex-wrap: wrap">
            <div style="flex: 1 1 auto">
              @if(r[0] !== focusId()) {
              <button
                mat-button
                (click)="focus(r[0])"
                matTooltip="Focus vessel"
              >
                <mat-icon>center_focus_weak</mat-icon>
                FOCUS
              </button>
              } @else {
              <button
                mat-button
                (click)="focus();"
                matTooltip="Clear vessel focus"
              >
                <mat-icon>clear_all</mat-icon>
                UNFOCUS
              </button>
              }
            </div>
            <button
              mat-button
              [disabled]="app.uiConfig().mapMove"
              (click)="emitCenter(r[1].position)"
              matTooltip="Center Vessel"
            >
              <mat-icon>center_focus_strong</mat-icon>
              CENTER
            </button>
            @let trackShown = app.isVesselTrackShown(r[0]);
            <span
              [matTooltip]="
                app.config.vessels.aisShowTrack
                  ? 'Turn off &quot;Show All&quot; to enable'
                  : trackShown
                    ? 'Hide vessel track'
                    : 'Show vessel track'
              "
            >
              <button
                mat-button
                (click)="app.toggleVesselTrack(r[0])"
                [disabled]="app.config.vessels.aisShowTrack"
              >
                <mat-icon>{{ trackShown ? 'layers_clear' : 'route' }}</mat-icon>
                {{ trackShown ? 'UNTRACK' : 'TRACK' }}
              </button>
            </span>
            <div>
              <button
                mat-icon-button
                (click)="itemProperties(r[0])"
                matTooltip="Vessel Properties"
              >
                <mat-icon>info_outline</mat-icon>
              </button>
            </div>
          </div>
        </mat-card-actions>
      </mat-card>
    </cdk-virtual-scroll-viewport>
    }
  </div>
</div>
