@if (error) {
  <my-alert 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">
            @if (videoPlaylistToUpdate) {
              <a [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-image-input i18n-inputLabel inputLabel="Edit" inputName="thumbnailfile" formControlName="thumbnailfile"></my-image-input>
      </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'] }"
          >
        @if (formErrors['displayName']) {
          <div 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>

        @if (formErrors.privacy) {
          <div class="form-error" role="alert">{{ formErrors.privacy }}</div>
        }
      </div>

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

        @if (isEditor()) {
          <div class="form-group-description">
            <div i18n>
              Only {{ getOwnerAccountDisplayName() }}'s channels are listed
            </div>

            <div i18n>
              Changing the owner of a playlist is not supported
            </div>
          </div>
        }

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

        @if (formErrors['videoChannelId']) {
          <div class="form-error" role="alert">{{ formErrors['videoChannelId'] }}</div>
        }
      </div>

      @if (isCreation() && form.value['videoChannelId']) {
        <div class="form-group">
          <my-peertube-checkbox
            inputName="insertAtFirstPosition"
            formControlName="insertAtFirstPosition"
            i18n-labelText
            labelText="Insert at the first position in your channel's playlist list"
          >
            <ng-container ngProjectAs="description">
              <span i18n>Playlists can be manually sorted in your channel.</span>

              <br />

              <span i18n>By default, new playlists are added at the end of the list.</span>
            </ng-container>
          </my-peertube-checkbox>
        </div>
      }

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