<div quick-tour
  [quick-tour-description]="quickTourData.description"
  [quick-tour-order]="quickTourData.order"
  #statusCardQT="quickTour">
  <mat-card *ngIf="showFull; else showMin"
    class="expandedContainer">
    
    <mat-card-content>

      <!-- reset -->
      <div class="d-flex">
        <span class="flex-grow-0 d-flex align-items-center">
          Reset
        </span>

        <div class="flex-grow-1"></div>

        <button
          mat-icon-button
          (click)="resetNavigation({position:true})"
          matTooltip="Reset position">
          <i class="iavic iavic-translation"></i>
        </button>

        <button
          mat-icon-button
          (click)="resetNavigation({rotation:true})"
          matTooltip="Reset rotation">
          <i class="iavic iavic-rotation"></i>
        </button>

        <button
          mat-icon-button
          (click)="resetNavigation({zoom:true})"
          matTooltip="Reset zoom">
          <i class="iavic iavic-scaling"></i>
        </button>

        <mat-divider [vertical]="true"></mat-divider>

        <button mat-icon-button
          [attr.aria-label]="HIDE_FULL_STATUS_PANEL_ARIA_LABEL"
          (click)="statusCardQT.ngOnChanges(); showFull = false">
          <i class="fas fa-angle-up"></i>
        </button>
      </div>

      <!-- coord -->
      <div class="d-flex">

        <mat-form-field class="flex-grow-1">
          <mat-label>
            {{ (statusPanelRealSpace$ | async) ? 'Physical Coord' : 'Voxel Coord' }}
          </mat-label>
          <input type="text"
            matInput
            (keydown.enter)="textNavigateTo(navInput.value)"
            (keydown.tab)="textNavigateTo(navInput.value)"
            [value]="navVal$ | async"
            #navInput="matInput">

          <button mat-icon-button
            iav-stop="click"
            matSuffix
            [attr.aria-label]="COPY_NAVIGATION_STRING"
            (click)="copyString(navInput.value)">
            <i class="fas fa-copy"></i>
          </button>

          <button mat-icon-button
            iav-stop="click"
            matSuffix
            sxplr-share-view
            [attr.aria-label]="SHARE_BTN_ARIA_LABEL">
            <i class="fas fa-share-square"></i>
          </button>
        </mat-form-field>

      </div>

      <!-- cursor pos -->
      <mat-form-field
        class="w-100">
        <mat-label>
          Cursor Position
        </mat-label>
        <input type="text"
          matInput
          [readonly]="true"
          [value]="mouseVal$ | async">
      </mat-form-field>

    </mat-card-content>
  </mat-card>
</div>

<!-- minimised status bar -->
<ng-template #showMin>
  <div class="sxplr-custom-cmp text of-visible text-nowrap d-inline-flex align-items-center m-1 mt-3"
    iav-media-query
    #media="iavMediaQuery">

    <span *ngIf="(media.mediaBreakPoint$ | async) < 3" class="sxplr-pl-2">
      {{ navVal$ | async }}
    </span>

    <button mat-icon-button
      [sxplr-dialog-size]="null"
      [sxplr-dialog]="pointTmpl">
      <i class="fas fa-pen"></i>
    </button>

    <button mat-icon-button
      [attr.aria-label]="SHOW_FULL_STATUS_PANEL_ARIA_LABEL"
      (click)="statusCardQT.ngOnChanges(); showFull = true">
      <i class="fas fa-angle-down"></i>
    </button>
  </div>
</ng-template>

<ng-template #pointTmpl>
  <h1 mat-dialog-title>
    Navigation Coordinate
  </h1>
  <div mat-dialog-content>
    <form [formGroup]="dialogForm">
      <ng-template ngFor [ngForOf]="['x', 'y', 'z']" let-pos>

        <mat-form-field>
          <mat-label>{{ pos }} (mm)</mat-label>
          <input type="text" matInput [formControlName]="pos">
        </mat-form-field>
      </ng-template>
    </form>
  </div>

  <div mat-dialog-actions align="end">
    
    <ng-template [ngIf]="dialogInputState$ | async" let-state>

      <button mat-raised-button color="primary"
        (click)="selectPoint(state.valueMm)"
        [disabled]="!state.validated"
        mat-dialog-close>
        select point
      </button>
  
      <button mat-button color="primary"
        (click)="navigateTo(state.valueNm)"
        [disabled]="!state.validated"
        mat-dialog-close>
        navigate to point
      </button>

      <button mat-button color="primary"
        [attr.aria-label]="COPY_NAVIGATION_STRING"
        (click)="copyString(state.string)"
        [disabled]="!state.validated"
        mat-dialog-close>
        copy point
      </button>
  
    </ng-template>
    <button mat-button mat-dialog-close>
      cancel
    </button>
  </div>
</ng-template>