<style>
  .ap-confirm-icon {
    min-width: 35px;
    max-width: 35px;
    text-align: left;
  }

  .nosmall {
    display: none;
  }
  :host ::ng-deep .ck.ck-editor__main > .ck-editor__editable {
    color: black;
  }
  /* Note Details: scale wide embedded media (e.g. a tide-station graph) to fit
     the dialog rather than clipping it. Vertical overflow is handled by the
     single mat-dialog-content scroll region (max-height: 65vh), so the
     description must NOT add its own scroller. */
  :host ::ng-deep .note-description img,
  :host ::ng-deep .note-description svg {
    max-width: 100%;
    height: auto;
  }
  @media only screen and (min-width: 600px) {
    .ap-confirm-icon {
      min-width: 25%;
      max-width: 25%;
    }

    .nosmall {
      display: flex;
    }
    .nosmall.block {
      display: block;
    }

    .note-details {
      min-width: 400px;
    }
  }
</style>
<div>
  <mat-toolbar style="background-color: transparent">
    <span>
      @if(!data.editable) {
      <mat-icon [class]="icon?.class" [svgIcon]="icon?.svgIcon"
        >{{icon?.name}}</mat-icon
      >
      }
    </span>
    <span style="flex: 1 1 auto; text-align: center">
      @if(!data.editable) { {{'Note Details'}} } @else { {{(!data.title) ?
      (data.addMode) ? 'New Note' : 'Edit Note' : data.title}} }
    </span>
    <div style="width: 50px">
      <button
        mat-icon-button
        (click)="dialogRef.close({result:false, data: null})"
      >
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </mat-toolbar>

  @if(!data.editable) {
  <mat-dialog-content>
    <mat-card appearance="outlined">
      <mat-card-content>
        @if(data.note.properties.draft) {
        <p class="draft-watermark">Draft</p>
        }
        <div style="display: flex; flex-direction: column">
          <div style="padding-bottom: 5px; display: flex">
            <div style="font-weight: bold; vertical-align: top">Name:</div>
            <div style="padding-left: 10px">{{data.note?.name}}</div>
          </div>
          @if(data.note.group) {
          <div style="padding-bottom: 5px; display: flex">
            <div style="font-weight: bold; vertical-align: top">Group:</div>
            <div style="padding-left: 10px; flex: 1 1 auto">
              {{data.note?.group}}
            </div>
            @if(data.note.group && app.config.resources.notes.groupNameEdit) {
            <div>
              <button
                mat-button
                (click)="dialogRef.close({result:true, data: 'group', value: data.note.group})"
                matTooltip="View Group Notes"
              >
                <mat-icon>style</mat-icon>
              </button>
            </div>
            }
          </div>
          }
          <div style="flex: 1 1 auto; padding: 5px 0 5px 0">
            <div style="font-weight: bold; vertical-align: top">
              Description:
            </div>
            @if(data.note.mimeType.includes('markdown')) {
            <div class="note-description">
              <remark
                [processor]="mdProcessor"
                [markdown]="data.note.description"
              />
            </div>
            } @else {
            <div
              class="note-description"
              target="notelink"
              [innerHTML]="data.note.description | addTarget: '_notes'"
            ></div>
            }
          </div>
        </div>
      </mat-card-content>
      @if(data.note.url || !data.note.properties.readOnly){
      <mat-card-actions>
        <div style="display: flex; width: 100%">
          <div>
            @if(data.note.url) {
            <button
              mat-icon-button
              (click)="openNoteUrl()"
              matTooltip="Open Note link in browser window"
            >
              <mat-icon>open_in_new</mat-icon>
            </button>
            &nbsp; } @if(!data.note.properties.readOnly) {
            <button
              mat-icon-button
              (click)="dialogRef.close({result:true, data: 'edit'})"
              matTooltip="Edit Note"
            >
              <mat-icon>edit</mat-icon>
            </button>
            &nbsp; @if(data.note.position) {
            <button
              mat-icon-button
              (click)="dialogRef.close({result:true, data: 'move'})"
              matTooltip="Move Note"
            >
              <mat-icon>touch_app</mat-icon>
            </button>
            &nbsp; }
            <button
              mat-icon-button
              (click)="dialogRef.close({result:true, data: 'delete'})"
              matTooltip="Delete Note"
            >
              <mat-icon>delete</mat-icon>
            </button>
            }
          </div>
          @if(data.note.position) {
          <div
            class="nosmall block"
            style="flex: 1; font-size: 10pt; padding: 0 0 0 10px"
          >
            <span style="font-weight: bold">Lat:</span>&nbsp;
            {{data.note?.position?.latitude | coords :
            app.config.units.positionFormat : true}}

            <br />
            <span>
              <span style="font-weight: bold">Lon:</span>&nbsp;
              {{data.note?.position?.longitude | coords :
              app.config.units.positionFormat : false}}
            </span>
          </div>
          }
        </div>
      </mat-card-actions>
      }
    </mat-card>
  </mat-dialog-content>
  } @else {
  <mat-dialog-content>
    <div style="display: flex">
      <div style="flex: 1 1 auto">
        <div>
          <mat-form-field floatLabel="always" style="width: 100%">
            <mat-label>Name</mat-label>
            <input
              matInput
              #inptitle="ngModel"
              type="text"
              required
              [disabled]="false"
              [(ngModel)]="data.note.name"
            />
            @if(inptitle.invalid && (inptitle.dirty || inptitle.touched)) {
            <mat-error> Please enter a title for the note </mat-error>
            }
          </mat-form-field>
        </div>
        @if(app.config.resources.notes.groupNameEdit) {
        <div>
          <mat-form-field floatLabel="always" style="width: 100%">
            <mat-label>Group Name</mat-label>
            <input
              matInput
              #inpgroup="ngModel"
              type="text"
              [(ngModel)]="data.note.group"
            />
          </mat-form-field>
        </div>
        }
        <div>
          @if(data.note.mimeType.includes('markdown')) {
          <mat-form-field floatLabel="always" style="width: 100%">
            <mat-label>Description</mat-label>
            <textarea
              matInput
              rows="3"
              [(ngModel)]="data.note.description"
            ></textarea>
          </mat-form-field>
          } @else { @defer{
          <angular-editor
            height
            [config]="editorConfig"
            [placeholder]="'Add note text here.'"
            [(ngModel)]="data.note.description"
          >
          </angular-editor>
          } }
        </div>

        <div>
          <mat-form-field floatLabel="always" style="width: 100%">
            <mat-label>Link to additional content</mat-label>
            <input
              type="text"
              matInput
              placeholder="URL"
              [(ngModel)]="data.note.url"
            />
          </mat-form-field>
        </div>
        <div style="display: flex">
          <div style="padding-left: 10px">
            <mat-form-field style="width: 80px">
              <mat-select
                [ngModel]="icon.svgIcon"
                (ngModelChange)="onIconSelected($event)"
              >
                <mat-select-trigger>
                  @if(icon?.svgIcon?.length) {
                  <mat-icon [svgIcon]="icon?.svgIcon"></mat-icon>
                  } @else {
                  <mat-icon>{{icon?.name}}</mat-icon>
                  }
                </mat-select-trigger>
                @for(i of poiIcons; track i.id) {
                <!-- Touch gestures off: on a touch platform MatTooltip sets
                inline touch-action:none on its trigger to reserve the long
                press, and every row of this panel is a trigger — so a finger
                has nowhere to land that scrolls the list (#651). -->
                <mat-option
                  [value]="i.id"
                  [matTooltip]="i.name"
                  matTooltipTouchGestures="off"
                  ><mat-icon [svgIcon]="i.id">{{i.name}}</mat-icon>
                </mat-option>
                }
              </mat-select>
            </mat-form-field>
            <mat-slide-toggle
              labelPosition="before"
              [hideIcon]="true"
              [checked]="showAllIcons()"
              (change)="onShowAllToggle($event.checked)"
              style="font-size: 10pt; margin-left: 8px; vertical-align: middle"
            >
              Show all symbols
            </mat-slide-toggle>
          </div>
          <div style="padding-left: 10px">
            <mat-form-field style="width: 145px">
              <mat-label>Format</mat-label>
              <mat-select [(ngModel)]="data.note.mimeType">
                <mat-option value="text/markdown">Markdown</mat-option>
                <mat-option value="">HTML</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          @if(data.position) {
          <div style="font-size: 10pt">
            <div style="display: flex">
              <div style="width: 45px; font-weight: bold">Lat:</div>
              <div style="flex: 1 1 auto">{{data.note.position.latitude}}</div>
            </div>
            <div style="display: flex">
              <div style="width: 45px; font-weight: bold">Lon:</div>
              <div style="flex: 1 1 auto">{{data.note.position.longitude}}</div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  </mat-dialog-content>
  <mat-dialog-actions align="right">
    <div>
      <mat-slide-toggle
        labelPosition="before"
        [hideIcon]="true"
        [checked]="data.note.properties.draft"
        (change)="data.note.properties.draft=$event.checked;"
      >
        Draft:
      </mat-slide-toggle>
    </div>
    <div style="flex: 2">&nbsp;</div>
    <button mat-flat-button [disabled]="inptitle.invalid" (click)="onSave()">
      SAVE
    </button>
  </mat-dialog-actions>
  }
</div>
