<div class="arc-create-page">

  <div class="page-header">
    <h1>{{ 'arcCreate.title' | translate }}</h1>
  </div>

  <form [formGroup]="form" (ngSubmit)="submit()" class="arc-form">

    <div class="field">
      <label for="arc-create-name">{{ 'arcCreate.nameLabel' | translate }}</label>
      <input
        id="arc-create-name"
        type="text"
        formControlName="name"
        [placeholder]="'arcCreate.namePlaceholder' | translate"
        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
      />
    </div>

    <div class="field">
      <label>{{ 'arcCreate.structureLabel' | translate }}</label>
      <div class="arc-type-choice">
        <label class="arc-type-option" [class.selected]="form.get('type')?.value === 'LINEAR'">
          <input type="radio" formControlName="type" value="LINEAR" />
          <span class="arc-type-title">{{ 'arcCreate.linearTitle' | translate }}</span>
          <span class="arc-type-desc">{{ 'arcCreate.linearDesc' | translate }}</span>
        </label>
        <label class="arc-type-option" [class.selected]="form.get('type')?.value === 'HUB'">
          <input type="radio" formControlName="type" value="HUB" />
          <span class="arc-type-title">{{ 'arcCreate.hubTitle' | translate }}</span>
          <span class="arc-type-desc">{{ 'arcCreate.hubDesc' | translate }}</span>
        </label>
      </div>
    </div>

    <div class="field">
      <label for="arc-create-description">{{ 'common.description' | translate }}</label>
      <textarea
        id="arc-create-description"
        formControlName="description"
        [placeholder]="'arcCreate.descriptionPlaceholder' | translate"
        rows="5">
      </textarea>
    </div>

    <div class="field">
      <label>{{ 'arcCreate.iconLabel' | translate }}</label>
      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn-primary" [disabled]="form.invalid">
        {{ 'arcCreate.submit' | translate }}
      </button>
      <button type="button" class="btn-secondary" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    </div>

  </form>

</div>
