<div
  style="
    display: flex;
    flex-direction: column;
    position: relative;
    width: stretch;
    height: 100%;
  "
>
  <div>
    <div style="display: flex">
      <div>
        @if(!icon.svgIcon) {
        <mat-icon [class]="icon.class">{{icon.name}}</mat-icon>
        } @else {
        <mat-icon [svgIcon]="icon.svgIcon"></mat-icon>
        }
        <br />
        <span style="font-size: smaller; font-style: italic"
          >{{_waypoint()?.type ? _waypoint()?.type : 'waypoint'}}</span
        >
      </div>
      <div
        style="flex: 1; font-size: 10pt; padding: 0 0 0 10px; text-align: right"
      >
        <span style="font-weight: bold">Lat:</span>&nbsp;
        {{_waypoint()?.feature?.geometry.coordinates[1] | coords :
        app.config.units.positionFormat : true}}

        <br />
        <span>
          <span style="font-weight: bold">Lon:</span>&nbsp;
          {{_waypoint().feature?.geometry.coordinates[0] | coords :
          app.config.units.positionFormat : false}}
        </span>
      </div>
    </div>

    <mat-divider></mat-divider>

    <div style="display: flex">
      <div>
        <button
          mat-button
          [disabled]="_waypoint()?.feature?.properties?.readOnly || interacting()"
          (click)="onEdit()"
          matTooltip="Edit Waypoint"
        >
          <mat-icon>edit</mat-icon>
          EDIT
        </button>
        &nbsp; @if(this.app.data.activeWaypoint !== id()) {
        <button
          mat-button
          [disabled]="interacting()"
          (click)="onGoto()"
          matTooltip="Navigate To"
        >
          <mat-icon>near_me</mat-icon>
          GO TO
        </button>
        } @else {
        <button
          mat-button
          [disabled]="interacting()"
          (click)="onGoto(true)"
          matTooltip="Stop Navigating"
        >
          <mat-icon>clear_all</mat-icon>
          STOP
        </button>
        } &nbsp;
        <button
          mat-button
          [disabled]="interacting()"
          (click)="onPanTo()"
          matTooltip="Center Waypoint"
        >
          <mat-icon>center_focus_strong</mat-icon>
          CENTER
        </button>
        &nbsp;
        <button
          mat-button
          [disabled]="_waypoint()?.feature?.properties?.readOnly || this.app.data.activeWaypoint === id() || interacting()"
          (click)="onDelete()"
          matTooltip="Delete Waypoint"
        >
          <mat-icon>delete</mat-icon>
          DELETE
        </button>
      </div>
    </div>

    <mat-divider></mat-divider>

    <div
      style="
        display: flex;
        flex-direction: column;
        padding-left: 5px;
        padding-top: 15px;
      "
    >
      <div style="font-weight: bold; font-size: larger; padding-bottom: 5px">
        {{_waypoint()?.name}}
      </div>
    </div>
  </div>

  <remark
    [processor]="mdProcessor"
    [markdown]="_waypoint().description"
    style="flex: 2 1 auto; overflow-y: auto; padding-left: 5px"
  >
    <ng-template remarkTemplate="heading" let-node>
      @if(node.depth === 1) {
      <h1 [remarkNode]="node" style="font-size: 14pt"></h1>
      } @if(node.depth === 2) {
      <h2 [remarkNode]="node" style="font-size: 12pt"></h2>
      } @if(node.depth === 3) {
      <h3 [remarkNode]="node" style="font-size: 10pt"></h3>
      } @if(node.depth === 4) {
      <h4 [remarkNode]="node" style="font-size: 8pt"></h4>
      }
    </ng-template>
  </remark>

  <mat-divider></mat-divider>
  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          <mat-icon>local_offer</mat-icon>
          &nbsp;Notes:
        </mat-panel-title>
        <mat-panel-description>
          ({{this.notes().length}})
          <button
            matIconButton
            matTooltip="Add Note"
            [disabled]="interacting()"
            (click)="addNote()"
          >
            <mat-icon>add</mat-icon>
          </button>
        </mat-panel-description>
      </mat-expansion-panel-header>
      @if(this.notes().length){
      <mat-nav-list
        style="min-height: 50px; max-height: 200px; overflow-y: auto"
      >
        @for( note of notes(); track note[0]) {
        <a mat-list-item (click)="showNote(note[0])">
          <span matListItemTitle> {{note[1].name}}</span>
        </a>
        }
      </mat-nav-list>
      }
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          <mat-icon>category</mat-icon>
          &nbsp;Groups:
        </mat-panel-title>
        <mat-panel-description>
          ({{this.groups().length}}) @if(app.featureFlags().resourceGroups) {
          <button
            matIconButton
            matTooltip="Add to Group"
            [disabled]="interacting()"
            (click)="addToGroup()"
          >
            <mat-icon>add</mat-icon>
          </button>
          }
        </mat-panel-description>
      </mat-expansion-panel-header>
      @if(this.groups().length){
      <mat-nav-list
        style="min-height: 50px; max-height: 200px; overflow-y: auto"
      >
        @for( group of groups(); track group[0]) {
        <a mat-list-item (click)="skgroups.editGroupInfo(group[0])">
          <span matListItemTitle> {{group[1].name}}</span>
        </a>
        }
      </mat-nav-list>
      }
    </mat-expansion-panel>
  </mat-accordion>
</div>
