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

<div class="pt-4">
  <form (ngSubmit)="onFormValidated()" [formGroup]="form">

    <div class="pt-two-cols"> <!-- channel grid -->
      <div class="title-col">
        @if (mode() === 'create') {
          <h2 i18n>NEW CHANNEL</h2>
        } @else {
          <h2 i18n>UPDATE CHANNEL</h2>
        }
      </div>

      <div class="content-col">
        <my-actor-banner-edit
          *ngIf="channel()" previewImage="true" class="d-block mb-4"
          [bannerUrl]="channel()?.bannerUrl" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
        ></my-actor-banner-edit>

        <my-actor-avatar-edit
          *ngIf="channel()" class="d-block mb-4" actorType="channel"
          [displayName]="channel().displayName" previewImage="true" [avatars]="channel().avatars"
          [username]="mode() === 'update' && channel().name" [subscribers]="mode() === 'update' && channel().followersCount"
          (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
        ></my-actor-avatar-edit>

        <div class="form-group" *ngIf="mode() === 'create'">
          <label i18n for="name">Name</label>

          <div class="input-group">
            <input
              type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
              formControlName="name" [ngClass]="{ 'input-error': formErrors.name }" class="form-control w-auto flex-grow-1 d-block"
            >
            <div class="input-group-text">&#64;{{ instanceHost }}</div>
          </div>
          <div *ngIf="formErrors.name" class="form-error" role="alert">
            {{ formErrors.name }}
          </div>
        </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 markdown-block">
          <label i18n for="description">Description</label>

          <my-help helpType="markdownText" supportRelMe="true"></my-help>

          <my-markdown-textarea
            inputId="description" formControlName="description"
            markdownType="enhanced" [formError]="formErrors.description" withEmoji="true" withHtml="true"
          ></my-markdown-textarea>

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

        <div class="form-group markdown-block">
          <label i18n for="support">Support</label>

          <div class="form-group-description" i18n>
            This is text that helps people visiting your channel page <strong>understand how to support you</strong>. You can use <my-markdown-hint helpType="markdownText">Markdown Language</my-markdown-hint>, including <strong>links to your fundraising tools</strong>.
          </div>

          <my-markdown-textarea
            inputId="support" formControlName="support"
            markdownType="enhanced" [formError]="formErrors.support" withEmoji="true" withHtml="true"
          ></my-markdown-textarea>
        </div>

        <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
          <my-peertube-checkbox
            inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
            i18n-labelText labelText="Overwrite support field of all videos of this channel"
          ></my-peertube-checkbox>
        </div>

        <div class="form-group">
          <label i18n for="playerTheme">Player Theme</label>

          <my-select-player-theme formControlName="playerTheme" inputId="playerTheme" mode="channel">
          </my-select-player-theme>
        </div>

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