@if (type() === 'edit') {
<div>
  <app-language-redirection [path]="'/author'" [id]="id!" />
</div>
}
<form class="theme-form theme-form-2 mega-form" [formGroup]="form" (ngSubmit)="submit()">
  <div class="row">
    <div class="col-10">
      <app-form-fields [label]="'author_name'" [for]="'author_name'" [required]="true">
        <input
          class="form-control"
          type="text"
          placeholder="{{ 'enter_author_name' | translate }}"
          name="author_name"
          formControlName="author_name"
        />
        @if (form.controls['author_name'].touched &&
        form.controls['author_name'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'author_name_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'slug'" [for]="'slug'">
        <input
          class="form-control"
          id="slug"
          type="text"
          [value]="(author$ | async)?.slug ? (author$ | async)?.slug : form.get('author_name')?.value?.split(' ')?.join('-')"
          placeholder="{{ 'enter_slug' | translate }}"
          formControlName="slug"
        />
      </app-form-fields>
      <app-form-fields [label]="'bio'" [for]="'bio'" [required]="true">
        <textarea
          class="form-control"
          id="bio"
          placeholder="{{ 'enter_bio' | translate }}"
          formControlName="bio"
        ></textarea>
        @if (form.controls['bio'].touched && form.controls['bio'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'bio_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'image'" [for]="'product_thumbnail_id'" [required]="true">
        <app-image-upload
          [multipleImage]="false"
          [accept]="[mediaConfig.image]"
          [image]="(author$ | async)?.author_image!"
          [helpText]="'*Upload image size 600x600px recommended'"
          (selectedFiles)="selectAuthorImage($event)"
        />
      </app-form-fields>
      <app-form-fields [label]="'cover'" [for]="'author_cover_image_id'" [required]="false">
        <app-image-upload
          [multipleImage]="false"
          [accept]="[mediaConfig.image]"
          [image]="(author$ | async)?.author_cover_image!"
          [helpText]="'*Upload image size 600x600px recommended'"
          (selectedFiles)="selectAuthorCoverImage($event)"
        />
      </app-form-fields>

      <app-form-fields [label]="'country'" [for]="'country'" [required]="true">
        <select2
          class="custom-select"
          [data]="(countries$ | async)?.length ? (countries$ | async)! : []"
          [placeholder]="'select_country' | translate"
          formControlName="country_id"
          (update)="countryChange($event)"
          resettable
        />
        @if (form?.controls!['country_id']?.touched &&
        form?.controls!['country_id']?.errors?.['required']) {
        <div class="invalid-feedback">{{ 'country_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'state'" [for]="'state'" [required]="true">
        <select2
          class="custom-select"
          [data]="(states$ | async)?.length ? (states$ | async)! : [] "
          [placeholder]="'select_state' | translate"
          formControlName="state_id"
          resettable
        />
        @if (form?.controls!['state_id'].touched &&
        form?.controls!['state_id'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'state_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'city'" [for]="'city'" [required]="true">
        <input
          class="form-control"
          type="text"
          placeholder="{{'enter_city_name' | translate }}"
          name="city"
          formControlName="city"
        />
        @if (form.controls['city'].touched && form.controls['city'].errors?.['required']) {
        <div class="invalid-feedback">{{ 'city_is_required' | translate }}</div>
        }
      </app-form-fields>
      <app-form-fields [label]="'birth_date'" [for]="'birth_date'">
        <div class="custom-dp-dropdown">
          <input
            class="form-control"
            placeholder="dd/mm/yyyy"
            name="birth_date"
            [value]="formatter.format(birthDate)"
            (dateSelect)="onDateSelection($event)"
            [minDate]="{ year: 1800, month: 1, day: 1 }"
            [maxDate]="maxDate"
            ngbDatepicker
            #birth_date="ngbDatepicker"
          />
          <button class="btn bi bi-calendar3" (click)="birth_date.toggle()" type="button">
            <i class="ri-calendar-line"></i>
          </button>
        </div>
      </app-form-fields>
      <app-form-fields [label]="'death_date'" [for]="'death_date'">
        <div class="custom-dp-dropdown">
          <input
            class="form-control"
            placeholder="dd/mm/yyyy"
            name="death_date"
            (dateSelect)="onDateSelection($event)"
            [value]="formatter.format(deathDate)"
            [minDate]="{ year: 1800, month: 1, day: 1 }"
            [maxDate]="maxDate"
            ngbDatepicker
            #death_date="ngbDatepicker"
          />
          <button class="btn bi bi-calendar3" (click)="death_date.toggle()" type="button">
            <i class="ri-calendar-line"></i>
          </button>
        </div>
      </app-form-fields>
      <app-form-fields [label]="'languages'" [for]="'languages'">
        <input
          class="form-control"
          type="text"
          placeholder="{{ 'enter_languages' | translate }}"
          name="languages"
          formControlName="languages"
        />
      </app-form-fields>
      <app-form-fields [label]="'FaceBook'" [for]="'facebook'">
        <input
          type="url"
          class="form-control"
          placeholder="{{ 'enter_url' | translate }}"
          formControlName="facebook"
        />
      </app-form-fields>
      <app-form-fields [label]="'Instagram'" [for]="'instagram'">
        <input
          type="url"
          class="form-control"
          placeholder="{{ 'enter_url' | translate }}"
          formControlName="instagram"
        />
      </app-form-fields>
      <app-form-fields [label]="'Twitter'" [for]="'Twitter'">
        <input
          type="url"
          class="form-control"
          placeholder="{{ 'enter_url' | translate }}"
          formControlName="twitter"
        />
      </app-form-fields>
      <app-form-fields [label]="'youtube'" [for]="'youtube'">
        <input
          type="url"
          class="form-control"
          placeholder="{{ 'enter_url' | translate }}"
          formControlName="youtube"
        />
      </app-form-fields>
      <app-form-fields [label]="'pinterest'" [for]="'pinterest'">
        <input
          type="url"
          class="form-control"
          placeholder="{{ 'enter_url' | translate }}"
          formControlName="pinterest"
        />
      </app-form-fields>
      <app-form-fields [label]="'status' | translate" [for]="'status'" [required]="true">
        <div class="form-check form-switch ps-0">
          <label class="switch">
            <input type="checkbox" id="status" formControlName="status" />
            <span class="switch-state"></span>
          </label>
        </div>
      </app-form-fields>
    </div>
  </div>
  <app-button [id]="'blog_btn'">
    {{ (type() === 'create' ? 'save_author' : 'update_author') | translate }}
  </app-button>
</form>