AltitudeWeb/frontend/src/app/pages/forms/appeal/appeal.component.html

<div>
  <app-header [current_page]="'appeal'" height="200px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">
    <div class="title" header-content>
      <h1>Appeal</h1>
    </div>
  </app-header>
  <main>
    <section class="darkmodeSection appeal-container">
      <div class="form-container">
        <div class="pages">
          @if (currentPageIndex === 0) {
            <section class="formPage">
              <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
              <h1>Punishment Appeal</h1>
              <p>We aim to respond within 48 hours.</p>
            </section>
          }

          <!-- Page 2 -->
          @if (currentPageIndex === 1) {
            <section class="formPage">
              <h1>Page 2</h1>
              <p>This is the second page of the form.</p>
            </section>
          }

          <!-- Page 3 -->
          @if (currentPageIndex === 2) {
            <section class="formPage">
              <h1>Page 3</h1>
              <p>This is the third page of the form.</p>
            </section>
          }
        </div>

        <!-- Navigation dots -->
        <div class="form-navigation">
          <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
            <mat-icon>navigate_before</mat-icon>
          </button>

          @for (i of totalPages; track i) {
            <div
              class="nav-dot"
              [class.active]="i === currentPageIndex"
              (click)="goToPage(i)">
            </div>
          }

          <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
            <mat-icon>navigate_next</mat-icon>
          </button>
        </div>
      </div>
    </section>
  </main>
</div>