<div class="fl-content">
  <p class="fl-red-color"
     i18n>Updating a journal entry reverses related credit added to client balance and/or paid invoice.</p>
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="journalEditForm">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="journalEditForm"></app-form-errors>
    <div layoutDirection="column">
      <mat-form-field>
        <mat-label i18n>Source</mat-label>
        <input matInput placeholder="Source" i18n-placeholder type="text" formControlName="source">
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Destination</mat-label>
        <input matInput placeholder="Destination" i18n-placeholder type="text" formControlName="destination">
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Amount</mat-label>
        <input matInput placeholder="Amount" i18n-placeholder type="text" formControlName="amount" required>
        <mat-error>{{journalEditForm.controls.amount.errors | errorFormatter}}</mat-error>
        <span matSuffix class="fl-margin-right-small">{{object.destination_currency}}</span>
      </mat-form-field>

      <div layoutDirection="row" appLayoutGap="5px" class="fl-margin-bottom-small">
        <mat-form-field appFlex="50">
          <mat-label i18n>Date</mat-label>
          <input matInput [matDatepicker]="dtPicker" placeholder="Date" i18n-placeholder
                 formControlName="date_added">
          <mat-datepicker-toggle matSuffix [for]="dtPicker"></mat-datepicker-toggle>
          <mat-datepicker #dtPicker></mat-datepicker>
          <mat-error>{{journalEditForm.controls.date_added.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Time ({{timeHelper.timeFormat}})</mat-label>
          <input matInput placeholder="{{timeHelper.timeFormat}}"
                 formControlName="date_added_time">
          <button [attr.fl-tooltip]="timeHelper.localTimeTooltip" mat-icon-button matSuffix
                  (click)="$event.preventDefault();">
            <mat-icon>info</mat-icon>
          </button>
          <mat-error>{{ journalEditForm.controls.date_added_time.errors | errorFormatter }}</mat-error>
          <mat-hint i18n>E.g. {{timeHelper.timeExample}}, {{timeHelper.timezoneDisplay}} time</mat-hint>
        </mat-form-field>
      </div>
    </div>
  </form>
</div>
