Chocobozzz/PeerTube

<my-alert *ngIf="error" type="danger">{{ error }}</my-alert>

<div class="pt-two-cols"> <!-- playlist grid -->
  <div class="title-col">
    <nav aria-label="breadcrumb">
      <ol class="pt-breadcrumb">
        <li class="breadcrumb-item">
          <a routerLink="/my-library/video-playlists" i18n>My Playlists</a>
        </li>

        @if (isCreation()) {
          <li class="breadcrumb-item active" i18n>Create</li>
        } @else {
          <li class="breadcrumb-item active" i18n>Edit</li>

          <li class="breadcrumb-item active" aria-current="page">
            <a *ngIf="videoPlaylistToUpdate" [routerLink]="[ '/my-library/video-playlists/update', videoPlaylistToUpdate?.shortUUID]">
              {{ videoPlaylistToUpdate?.displayName }}
            </a>
          </li>
        }
      </ol>
    </nav>

    @if (isCreation()) {
      <h2 class="visually-hidden" i18n>NEW PLAYLIST</h2>
    } @else {
      <h2 class="visually-hidden" i18n>UPDATE PLAYLIST</h2>
    }
  </div>

  <div class="content-col">
    <form (ngSubmit)="formValidated()" [formGroup]="form">

      <div class="form-group">
        <label for="thumbnailfile" i18n>Playlist thumbnail</label>

        <my-preview-upload
          i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"
          previewWidth="223px" previewHeight="122px"
        ></my-preview-upload>
      </div>

      <div class="form-group">
        <label i18n for="displayName">Display name</label>
        <input
          type="text" id="displayName" class="form-control"
          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
        >
        <div *ngIf="formErrors['displayName']" class="form-error" role="alert">
          {{ formErrors['displayName'] }}
        </div>
      </div>

      <div class="form-group">
        <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
        <my-markdown-textarea inputId="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
      </div>

      <div class="form-group">
        <label i18n for="privacy">Privacy</label>
        <my-select-options inputId="privacy" [items]="videoPlaylistPrivacies" formControlName="privacy"></my-select-options>

        <div *ngIf="formErrors.privacy" class="form-error" role="alert">{{ formErrors.privacy }}</div>
      </div>

      <div class="form-group">
        <label for="videoChannelId" i18n>Channel</label>

        <my-select-channel inputId="videoChannelId" [items]="userVideoChannels" formControlName="videoChannelId"></my-select-channel>

        <div *ngIf="formErrors['videoChannelId']" class="form-error" role="alert">{{ formErrors['videoChannelId'] }}</div>
      </div>

      <input type="submit" class="peertube-button orange-button" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
    </form>
  </div>
</div>