<ng-container>
  <app-header [current_page]="'nickgenerator'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
              [overlay_gradient]="0.5">
    <div class="title" header-content>
      <h1>Nickname Generator</h1>
      <h2>Customize your in-game nickname</h2>
      <h3 style="font-family: 'minecraft-text', sans-serif; font-size: 0.8rem; margin-top: 10px;">Made by TheParm</h3>
      <!--TODO remove this message when everything works-->
      <p style="font-weight: bolder; color: red">NOTICE: This page is in the process of being updated to work on the new
        site.<br> This version is functional, but only barely. Expect updates in the coming days</p>
    </div>
  </app-header>

  <main>
    <section class="darkmodeSection full-width">
      <div class="containerNick">
        <div class="controls">

          @for (part of parts; track $index; let i = $index) {
            <div class="part">
              <div class="row">
                <mat-form-field class="textField" appearance="outline">
                  <mat-label>Text</mat-label>
                  <input
                    matInput
                    [value]="part.text"
                    (input)="part.text = ($any($event.target).value || ''); onInputChanged()"
                    maxlength="16"
                  />
                  <mat-hint align="end">{{ part.text.length }} / 16</mat-hint>
                </mat-form-field>

                <mat-checkbox
                  class="checkbox"
                  [(ngModel)]="part.gradient"
                  (change)="onGradientToggle(i)"
                >Gradient
                </mat-checkbox>

                <mat-form-field
                  class="colorField"
                  appearance="outline"
                  [style.visibility]="(part.continuation && i>0 && parts[i-1].gradient && part.gradient) ? 'hidden' : 'visible'">
                  <mat-label>Color A</mat-label>
                  <input
                    matInput
                    type="color"
                    [value]="part.colorA"
                    (input)="part.colorA = $any($event.target).value; onInputChanged()"
                  />
                </mat-form-field>

                <mat-form-field
                  class="colorField"
                  appearance="outline"
                  [style.visibility]="part.gradient ? 'visible' : 'hidden'">
                  <mat-label>Color B</mat-label>
                  <input
                    matInput
                    type="color"
                    [value]="part.colorB"
                    (input)="part.colorB = $any($event.target).value; onInputChanged()"
                  />
                </mat-form-field>

                <mat-checkbox
                  class="checkbox"
                  [(ngModel)]="part.continuation"
                  (change)="onContinuationToggle(i)"
                  [disabled]="i===0 || !part.gradient || !parts[i-1].gradient"
                >Continuation
                </mat-checkbox
                >
              </div>

              @if (part.invalid) {
                <div class="invalid">(min 1 – max 16 chars{{ part.gradient ? '' : ' for non-empty text' }})</div>
              }
              <mat-divider></mat-divider>
            </div>
          }

          <div class="buttons">
            <button mat-raised-button (click)="addPart()">Add Part</button>
            <button mat-raised-button (click)="deletePart()">Remove Part</button>
          </div>

          @if (showCommands) {
            <div class="commands">
              <div class="commandRow">
                <div class="command">{{ tryCmd }}</div>
                <button mat-stroked-button (click)="copy(tryCmd, 'try')">{{ tryCommandButtonContent }}</button>
              </div>
              <div class="commandRow">
                <div class="command">{{ requestCmd }}</div>
                <button mat-stroked-button (click)="copy(requestCmd, 'request')">{{ requestCommandButtonContent }}
                </button>
              </div>
            </div>
          }

          @if (showPreview) {
            <div class="preview" [innerHTML]="previewHtml"></div>
          }
        </div>
      </div>
    </section>
  </main>
</ng-container>
