<div class="max-w-3xl space-y-5">
  <section>
    <div class="flex items-center gap-2 mb-3">
      <ng-icon
        name="lucidePower"
        class="w-5 h-5 text-muted-foreground"
      />
      <h4 class="text-sm font-semibold text-foreground">{{ 'settings.general.application' | translate }}</h4>
    </div>

    <div class="space-y-3">
      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <div class="flex items-center justify-between gap-4">
          <div>
            <p class="text-sm font-medium text-foreground">{{ 'settings.general.reopenLastChat.label' | translate }}</p>
            <p class="text-xs text-muted-foreground">{{ 'settings.general.reopenLastChat.description' | translate }}</p>
          </div>

          <label class="relative inline-flex cursor-pointer items-center">
            <input
              type="checkbox"
              [checked]="reopenLastViewedChat()"
              (change)="onReopenLastViewedChatChange($event)"
              id="general-reopen-last-chat-toggle"
              [attr.aria-label]="'settings.general.reopenLastChat.aria' | translate"
              class="sr-only peer"
            />
            <div
              class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
            ></div>
          </label>
        </div>
      </div>

      <div
        class="rounded-lg border border-border bg-secondary/20 p-4 transition-opacity"
        [class.opacity-60]="!isElectron"
      >
        <div class="flex items-center justify-between gap-4">
          <div>
            <p class="text-sm font-medium text-foreground">{{ 'settings.general.autoStart.label' | translate }}</p>

            @if (isElectron) {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.autoStart.description' | translate }}</p>
            } @else {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.autoStart.desktopOnly' | translate }}</p>
            }
          </div>

          <label
            class="relative inline-flex items-center"
            [class.cursor-pointer]="isElectron && !savingAutoStart()"
            [class.cursor-not-allowed]="!isElectron || savingAutoStart()"
          >
            <input
              type="checkbox"
              [checked]="autoStart()"
              [disabled]="!isElectron || savingAutoStart()"
              (change)="onAutoStartChange($event)"
              id="general-auto-start-toggle"
              [attr.aria-label]="'settings.general.autoStart.aria' | translate"
              class="sr-only peer"
            />
            <div
              class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-disabled:bg-muted/80 peer-disabled:after:bg-muted-foreground/40 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
            ></div>
          </label>
        </div>
      </div>

      <div
        class="rounded-lg border border-border bg-secondary/20 p-4 transition-opacity"
        [class.opacity-60]="!isElectron"
      >
        <div class="flex items-center justify-between gap-4">
          <div>
            <p class="text-sm font-medium text-foreground">{{ 'settings.general.closeToTray.label' | translate }}</p>

            @if (isElectron) {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.closeToTray.description' | translate }}</p>
            } @else {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.autoStart.desktopOnly' | translate }}</p>
            }
          </div>

          <label
            class="relative inline-flex items-center"
            [class.cursor-pointer]="isElectron && !savingCloseToTray()"
            [class.cursor-not-allowed]="!isElectron || savingCloseToTray()"
          >
            <input
              type="checkbox"
              [checked]="closeToTray()"
              [disabled]="!isElectron || savingCloseToTray()"
              (change)="onCloseToTrayChange($event)"
              id="general-close-to-tray-toggle"
              [attr.aria-label]="'settings.general.closeToTray.aria' | translate"
              class="sr-only peer"
            />
            <div
              class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-disabled:bg-muted/80 peer-disabled:after:bg-muted-foreground/40 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
            ></div>
          </label>
        </div>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4">
        <div class="flex items-center justify-between gap-4">
          <div>
            <p class="text-sm font-medium text-foreground">{{ 'settings.general.experimentalVlc.label' | translate }}</p>
            @if (experimentalMedia.vlcJsRuntimeStatus() === 'checking') {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.experimentalVlc.checking' | translate }}</p>
            } @else if (experimentalMedia.vlcJsRuntimeAvailable()) {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.experimentalVlc.available' | translate }}</p>
            } @else {
              <p class="text-xs text-muted-foreground">{{ 'settings.general.experimentalVlc.unavailable' | translate }}</p>
            }
          </div>

          <label
            class="relative inline-flex items-center"
            [class.cursor-pointer]="experimentalMedia.vlcJsRuntimeAvailable()"
            [class.cursor-not-allowed]="!experimentalMedia.vlcJsRuntimeAvailable()"
          >
            <input
              type="checkbox"
              [checked]="experimentalMedia.vlcJsPlaybackEnabled()"
              [disabled]="!experimentalMedia.vlcJsRuntimeAvailable()"
              (change)="onExperimentalVlcPlaybackChange($event)"
              id="general-experimental-vlc-playback-toggle"
              [attr.aria-label]="'settings.general.experimentalVlc.aria' | translate"
              class="sr-only peer"
            />
            <div
              class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-disabled:bg-muted/80 peer-disabled:after:bg-muted-foreground/40 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
            ></div>
          </label>
        </div>
      </div>
    </div>
  </section>

  @if (isElectron) {
    <section>
      <div class="flex items-center gap-2 mb-3">
        <h4 class="text-sm font-semibold text-foreground">{{ 'settings.general.gameDetection.title' | translate }}</h4>
      </div>

      <div class="rounded-lg border border-border bg-secondary/20 p-4 space-y-3">
        <p class="text-xs text-muted-foreground">
          {{ 'settings.general.gameDetection.description' | translate }}
        </p>

        <div class="flex items-center gap-2">
          <input
            type="text"
            appSelectOnFocus
            appSubmitOnEnter
            (submitOnEnter)="addIgnoredProcess()"
            class="flex-1 rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
            [placeholder]="'settings.general.gameDetection.processPlaceholder' | translate"
            [value]="ignoredProcessDraft()"
            (input)="onIgnoredProcessDraftChange($event)"
            [attr.aria-label]="'settings.general.gameDetection.processAria' | translate"
          />
          <button
            type="button"
            class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
            [disabled]="savingIgnoredGameProcesses() || !ignoredProcessDraft().trim()"
            (click)="addIgnoredProcess()"
          >
            {{ 'settings.general.gameDetection.add' | translate }}
          </button>
        </div>

        @if (ignoredGameProcesses().length === 0) {
          <p class="text-xs text-muted-foreground italic">{{ 'settings.general.gameDetection.empty' | translate }}</p>
        } @else {
          <ul class="flex flex-wrap gap-2">
            @for (entry of ignoredGameProcesses(); track entry) {
              <li class="inline-flex items-center gap-1 rounded-md bg-secondary/40 px-2 py-1 text-xs text-foreground">
                <span>{{ entry }}</span>
                <button
                  type="button"
                  class="text-muted-foreground hover:text-foreground"
                  [disabled]="savingIgnoredGameProcesses()"
                  (click)="removeIgnoredProcess(entry)"
                  [attr.aria-label]="'settings.general.gameDetection.removeProcessAria' | translate: { name: entry }"
                >
                  ×
                </button>
              </li>
            }
          </ul>
        }
      </div>
    </section>
  }
</div>
