<div class="anchorwatch mat-app-background">
  <mat-card>
    <mat-card-title>
      <div class="title-block">
        <div style="width: 50px">
          <button
            mat-icon-button
            (click)="close()"
            matTooltip="Close"
            matTooltipPosition="left"
          >
            <mat-icon>arrow_back</mat-icon>
          </button>
        </div>
        <div style="flex: 1 1 auto; padding-top: 7px">Anchor Watch</div>
      </div>
    </mat-card-title>
    <mat-card-content>
      <div>
        <b>Status:</b>
      </div>
      <div
        style="
          width: 150px;
          height: 150px;
          color: black;
          background-position: top left;
          background-size: cover;
        "
        [style.backgroundImage]="bgImage"
      >
        <b
          style="
            position: relative;
            top: 30px;
            left: 80px;
            width: 35px;
            text-align: right;
          "
        >
          {{ formattedRadiusValue() }}
        </b>
      </div>
    </mat-card-content>

    <mat-card-actions>
      <div style="width: 100%">
        <div>
          RAISE
          <mat-slide-toggle
            #slideCtl
            [hideIcon]="true"
            [disabled]="disableRaiseDrop || ctlAlarmRadius.invalid"
            [checked]="!raised"
            (change)="dropRaiseAnchor($event)"
          >
          </mat-slide-toggle>
          DROP
        </div>
        <div [style.display]="raised ? 'flex' : 'none'">
          <div style="flex: 2">
            <mat-checkbox
              #chkDefaultRadius
              (change)="onDefaultRadiusChecked($event)"
              [checked]="useDefaultRadius"
              [disabled]="!raised || useSetManual"
              >Set Radius
            </mat-checkbox>
          </div>
          <div>
            <mat-form-field floatLabel="always" style="max-width: 130px">
              <mat-label
                >Alarm Radius ({{
                  convert.getSymbol(app.config.units.length)
                }})</mat-label
              >
              <input
                #ctlAlarmRadius="ngModel"
                [ngModel]="defaultAlarmRadius()"
                (ngModelChange)="onDefaultRadiusChange($event)"
                [disabled]="!raised || !useDefaultRadius || useSetManual"
                matInput
                required
                type="number"
                min="1"
                step="1"
              />
              @if (
                ctlAlarmRadius.invalid &&
                (ctlAlarmRadius.dirty || ctlAlarmRadius.touched)
              ) {
                <mat-error>Value must be greater than 0.</mat-error>
              }
            </mat-form-field>
          </div>
        </div>

        <div [style.display]="raised ? 'flex' : 'none'">
          <div>
            <mat-checkbox
              #chkSetManual
              (change)="onSetManualCheck($event)"
              [checked]="useSetManual"
              [disabled]="!raised || useDefaultRadius"
            >
            </mat-checkbox>
          </div>

          <div style="flex: 2">
            <button
              mat-raised-button
              (click)="setManualAnchor()"
              [disabled]="
                !raised ||
                useDefaultRadius ||
                !useSetManual ||
                ctlRodeLength.invalid
              "
            >
              Manual Set
            </button>
          </div>

          <div>
            <mat-form-field floatLabel="always" style="max-width: 130px">
              <mat-label
                >Rode Length ({{
                  convert.getSymbol(app.config.units.length)
                }})</mat-label
              >
              <input
                #ctlRodeLength="ngModel"
                [(ngModel)]="defaultRodeLength"
                [disabled]="!raised || useDefaultRadius || !useSetManual"
                matInput
                required
                type="number"
                min="1"
                step="1"
              />
              @if (
                ctlRodeLength.invalid &&
                (ctlRodeLength.dirty || ctlRodeLength.touched)
              ) {
                <mat-error>Value must be greater than 0.</mat-error>
              }
            </mat-form-field>
          </div>
        </div>
      </div>
    </mat-card-actions>
  </mat-card>
  @if (!raised) {
    <div>
      <mat-stepper
        orientation="vertical"
        [linear]="true"
        [selectedIndex]="rodeOut ? 1 : 0"
        #stepper
      >
        <mat-step
          [label]="rodeOut ? 'Anchor Set' : 'Let out rode'"
          editable="false"
        >
          <i>When rode is out click <b>Set</b>.</i>
          <div>
            <button mat-mini-fab matStepperNext (click)="stepSetRode()">
              Set
            </button>
          </div>
        </mat-step>
        <mat-step label="Adjust" editable="false">
          <div>
            <div>
              <br />
              <b>Adjust Radius:</b>
            </div>
            <div style="display: flex">
              <div>
                <mat-slider
                  discrete
                  [disabled]="disableRaiseDrop"
                  [displayWith]="formatSliderLabel"
                  [min]="min"
                  [max]="max"
                  step="1"
                  tickInterval="1"
                >
                  <input
                    matSliderThumb
                    [value]="sliderValue"
                    (valueChange)="setRadius($event)"
                  />
                </mat-slider>
              </div>
              <div
                style="
                  flex: 1;
                  font-size: 10pt;
                  line-height: 3em;
                  text-align: right;
                "
              >
                {{ displayRadius() }}
              </div>
            </div>
          </div>
          <div>
            <div>
              <br />
              <b>Shift Anchor:</b>
            </div>
            <nsew-buttons (direction)="shiftAnchor($event)"></nsew-buttons>
            <div style="font-style: italic; font-size: small">
              Click on anchor to enable drag.
            </div>
          </div>
        </mat-step>
      </mat-stepper>
    </div>
  }
</div>
