@if (form) {
  <form [formGroup]="form">
    <div class="card">
      @if (settingsUnlocked) {
        <div class="flex items-center justify-center gap-2 p-4 rounded-lg border w-full mb-3 text-center bg-[#ffecb3] text-[#614a00] border-[#ffe082]">
          <i class="pi pi-exclamation-triangle"></i>
          <span>Custom settings can cause damage & system instability. Only modify these settings if you understand the risks of running outside designed parameters.</span>
        </div>
      }
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        @if (settingsUnlocked) {
          <label for="frequency" class="w-full md:w-2/12 font-medium">Frequency</label>
          <div class="w-full md:w-10/12">
            <input class="input-text" id="frequency" formControlName="frequency" type="number" />
          </div>
        } @else {
          <label for="frequencySelect" class="w-full md:w-2/12 font-medium cursor-pointer">Frequency</label>
          <div class="w-full md:w-10/12">
            <app-dropdown
              id="frequencySelect"
              formControlName="frequency"
              [options]="selectFrequencyOptions">
            </app-dropdown>
          </div>
        }
      </div>
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        @if (settingsUnlocked) {
          <label for="coreVoltage" class="w-full md:w-2/12 font-medium">Core Voltage</label>
          <div class="w-full md:w-10/12">
            <input class="input-text" id="coreVoltage" formControlName="coreVoltage" type="number" />
          </div>
        } @else {
          <label for="voltageSelect" class="w-full md:w-2/12 font-medium cursor-pointer">Core Voltage</label>
          <div class="w-full md:w-10/12">
            <app-dropdown
              id="voltageSelect"
              formControlName="coreVoltage"
              [options]="selectVoltageOptions">
            </app-dropdown>
          </div>
        }
      </div>
      @if (form.get('overheat_mode')?.value === 1) {
        <div class="mt-4">
          <button type="button" class="btn btn-danger w-full text-center" (click)="disableOverheatMode()">
            Disable Overheat Mode
          </button>
          <small class="block mt-1 text-center text-primary font-medium">
            Make sure to reset Frequency and Voltage before clicking this button.
          </small>
        </div>
      }
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        <label for="autofanspeed" class="w-full md:w-2/12 font-medium cursor-pointer select-none">Automatic Fan Control</label>
        <div class="w-full md:w-10/12 flex items-center">
          <app-checkbox name="autofanspeed" formControlName="autofanspeed" inputId="autofanspeed" [binary]="true"></app-checkbox>
        </div>
      </div>
      @if (form.controls['autofanspeed'].value) {
        <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
          <label class="hidden md:flex w-full md:w-2/12 font-medium">Target Temperature</label>
          <div class="w-full md:w-10/12">
            <label class="block mb-1">
              <span class="md:hidden mr-1">Target Temperature:</span>{{form.controls['temptarget'].value}} °C
            </label>
            <app-slider [min]="35" [max]="66" formControlName="temptarget"></app-slider>
          </div>
        </div>
        <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
          <label class="hidden md:flex w-full md:w-2/12 font-medium">Minimum Fan Speed</label>
          <div class="w-full md:w-10/12">
            <label class="block mb-1">
              <span class="md:hidden mr-1">Minimum Fan Speed:</span>{{form.controls['minFanSpeed'].value}} %
            </label>
            <app-slider [min]="0" [max]="99" formControlName="minFanSpeed"></app-slider>
          </div>
        </div>
      } @else {
        <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
          <label class="hidden md:flex w-full md:w-2/12 font-medium">Fan Speed</label>
          <div class="w-full md:w-10/12">
            <label class="block mb-1">
              <span class="md:hidden mr-1">Fan Speed:</span>{{form.controls['manualFanSpeed'].value}} %
              @if (form.controls['manualFanSpeed'].value < 33) {
                <b class="text-primary font-medium">
                  Danger: Could Cause Overheating
                </b>
              }
              @if (form.controls['manualFanSpeed'].value == 100) {
                <b class="text-orange-500 ml-2 font-medium">
                  S19 Simulator
                </b>
              }
            </label>
            <app-slider formControlName="manualFanSpeed"></app-slider>
          </div>
        </div>
      }
    </div>
    <h3 class="mt-5">Display</h3>
    <div class="card">
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        <label for="displaySelect" class="w-full md:w-2/12 font-medium cursor-pointer">Type</label>
        <div class="w-full md:w-10/12">
          @if (isDisplayConfigurable) {
            <app-dropdown
              id="displaySelect"
              formControlName="display"
              [options]="displayOptions">
            </app-dropdown>
          } @else {
            <span class="input-text block opacity-70">
              {{form.controls['display'].value}}
            </span>
          }
        </div>
      </div>
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        <label for="rotationSelect" class="w-full md:w-2/12 font-medium cursor-pointer">Rotation</label>
        <div class="w-full md:w-10/12">
          <app-dropdown
            id="rotationSelect"
            formControlName="rotation"
            [options]="rotationOptions">
          </app-dropdown>
        </div>
      </div>
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        <label class="w-full md:w-2/12 hidden md:flex font-medium">
          Sleep
        </label>
        <div class="w-full md:w-10/12">
          <label class="block mb-1">
            @if (this.form.controls['displayTimeout'].value == 0) {
              <span class="md:hidden mr-1">Display</span> Always Off
            } @else if (this.form.controls['displayTimeout'].value > 0) {
              <span class="md:hidden mr-1">Display</span> Timeout: {{this.form.controls['displayTimeout'].value * 60 | dateAgo}}
            } @else if (this.form.controls['displayTimeout'].value == -1) {
              <span class="md:hidden mr-1">Display</span> Always On
            }
          </label>
          <app-slider [min]="0" [max]="displayTimeoutMaxSteps" [step]="1" [formControl]="displayTimeoutControl"></app-slider>
          <input type="hidden" formControlName="displayTimeout" />
        </div>
      </div>
      <div class="flex flex-col md:flex-row md:items-center mb-4 gap-2">
        <label for="invertscreen" class="w-full md:w-2/12 font-medium cursor-pointer select-none">Invert Display Colors</label>
        <div class="w-full md:w-10/12 flex items-center">
          <app-checkbox name="invertscreen" formControlName="invertscreen" inputId="invertscreen" [binary]="true"></app-checkbox>
        </div>
      </div>
    </div>
    <h3 class="mt-5">Statistics</h3>
    <div class="card">
      <div class="flex flex-col md:flex-row md:items-center gap-2">
        <label class="w-full md:w-2/12 hidden md:flex font-medium">
          Data Logging
        </label>
        <div class="w-full md:w-10/12">
          <label class="block mb-2">
            @if (this.form.controls['statsFrequency'].value == 0) {
              <span class="md:hidden mr-1">Data Logging</span>Disabled
            } @else if (this.form.controls['statsFrequency'].value > 0) {
              <span class="md:hidden mr-1">Log Data</span>Every {{form.controls['statsFrequency'].value | dateAgo: {strict: true} }} for {{(form.controls['statsFrequency'].value * statsLimit) | dateAgo}}
            }
          </label>
          <app-slider [min]="0" [max]="statsFrequencyMaxSteps" [step]="1" [formControl]="statsFrequencyControl"></app-slider>
          <input type="hidden" formControlName="statsFrequency" />
        </div>
      </div>
    </div>
    <div class="flex mt-5 gap-3">
      <button [disabled]="!form.dirty || form.invalid" (click)="updateSystem()"
      class="btn">Save</button>
      <button [disabled]="!savedChanges" (click)="restart()" class="btn" [class.btn-secondary]="!savedChanges">Restart</button>
      @if (settingsUnlocked) {
        <button (click)="toggleOverclockMode(false)"
        class="btn btn-danger" appTooltip="Return to safe preset values only">Disable Overclock Mode</button>
      }
    </div>
  </form>
}