<div class="dialog new-allotment-event">
  <button class="dialog-close" mat-dialog-close></button>
  <h2>{{ 'NewAllotmentEventModal.Title' | translate }}</h2>
  <form [class.submitted]="isFormSubmited" [formGroup]="form" (ngSubmit)="submitFormAsync()" autocomplete="off">
    <div class="control-row">
      <p class="control-label">
        <label for="project">{{ 'NewAllotmentEventModal.ProjectName' | translate }}</label>
      </p>
      <app-autocomplete class="input-component select-full-width" [isNeedToTranslate]="false"
                        [elementClass]="'wide-autocomplete'" [elementId]="'project'" formControlName="project"
                        [placeholder]="'NewAllotmentEventModal.ProjectNamePlaceholder' | translate"
                        [allItems]="allowedProjects"
                        #required>
      </app-autocomplete>
    </div>
    <div class="control-row">
      <p class="control-label">
        <label for="event-name">{{ 'NewAllotmentEventModal.AllotmentEventName' | translate }}</label>
      </p>
      <input class="input" id="event-name" formControlName="eventName">
    </div>
    <div class="control-row">
      <p class="control-label">
        <label for="token-address">{{ 'NewAllotmentEventModal.TokenAddress' | translate }}</label>
      </p>
      <input (keyup)="checkTokenAsync($event)" class="input" id="token-address" formControlName="tokenAddress" placeholder="{{ 'NewAllotmentEventModal.TokenAddressPlaceholder' | translate }}">
    </div>
    <div class="control-row">
      <p class="control-label">
        <label for="ticker">{{ 'NewAllotmentEventModal.TokenTicker' | translate }}</label>
      </p>
      <input class="input" id="ticker" formControlName="ticker">
    </div>
    <div class="control-row">
      <p class="control-label">
        <label for="token-decimals">{{ 'NewAllotmentEventModal.TokenDecimals' | translate }}</label>
      </p>
      <input class="input" id="token-decimals" formControlName="tokenDecimals">
    </div>
    <div class="control-row">
      <p class="control-label">
        <label for="finish-date">{{ 'NewAllotmentEventModal.FinishDate' | translate }}</label>
      </p>
      <p-calendar class="input-component select-full-width" placeholder="dd.mm.yyyy" [inputId]="'finish-date'" formControlName="finishDate" [inputStyleClass]="'input input-date'" dateFormat="dd.mm.yy" [yearNavigator]="true" yearRange="2018:2050"></p-calendar>
    </div>
    <div class="control-row submit">
      <input type="submit" value="{{ 'NewAllotmentEventModal.Create' | translate }}" [disabled]="isFormSubmited" class="material-btn">
    </div>
  </form>
</div>
