<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <p i18n>
      Are you sure you want to merge invoices
      <ng-container *ngFor="let id of invoicesToMergeDisplay; let index = index">
        <a class="active-link"
           [routerLink]="[config.getPanelUrl('billing/invoices'), id]">{{id}}</a>
        <span *ngIf="index < invoicesToMergeDisplay.length - 2">, </span>
        <span *ngIf="index === invoicesToMergeDisplay.length - 2"> and </span>
      </ng-container>?
    </p>
    <p i18n>
      Merging will create a new invoice containing all items from selected invoices. Selected invoices will be canceled.
    </p>
    <p i18n class="fl-important-text" *ngIf="hasPartiallyPaidInvoices">
      At least one selected invoice is partially paid. Related journal entries will be moved to the new invoice!
    </p>

    <form appFormSubmit (ngSubmit)="merge()" [formGroup]="invoicesMergeForm">
      <app-form-errors #formErrors [formGroup]="invoicesMergeForm"></app-form-errors>
      <p i18n>New due date will be: <app-date-displayer [date]="newDueDate"></app-date-displayer></p>
      <mat-checkbox class="fl-margin-bottom-small"
                    formControlName="override_due_date" color="primary" i18n>Override new due date</mat-checkbox>
      <div layoutDirection="row" appLayoutGap="5px" class="fl-margin-bottom-small"
           *ngIf="invoicesMergeForm.controls.override_due_date.value">
        <mat-form-field appFlex="50">
          <mat-label i18n>New invoice due date</mat-label>
          <input matInput [matDatepicker]="newDuePicker" placeholder="New invoice due date" i18n-placeholder
                 formControlName="new_due_date">
          <mat-datepicker-toggle matSuffix [for]="newDuePicker"></mat-datepicker-toggle>
          <mat-datepicker #newDuePicker></mat-datepicker>
          <mat-error>{{ invoicesMergeForm.controls.new_due_date.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="new_due_date_time">
          <button [attr.fl-tooltip]="timeHelper.localTimeTooltip" mat-icon-button matSuffix (click)="$event.preventDefault();">
            <mat-icon>info</mat-icon>
          </button>
          <mat-error>{{ invoicesMergeForm.controls.new_due_date_time.errors | errorFormatter }}</mat-error>
          <mat-hint i18n>E.g. {{timeHelper.timeExample}}, {{timeHelper.timezoneDisplay}} time</mat-hint>
        </mat-form-field>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
