<div
  class="container"
  fxFlex="0 0 auto"
  fxLayout="row"
  fxLayoutAlign="center center"
>
  <div class="add-option">
    <button
      mat-icon-button
      class="material-icons"
      (click)="onClickFileInput()"
      matTooltip="{{ 'chat.btnAttachFile' | translate }}"
    >
      <mat-icon>attach_file</mat-icon>
    </button>
    <input
      type="file"
      #fileInput
      style="display: none"
      multiple
      (change)="onChangeFileInput()"
    />

    <button
      mat-icon-button
      class="material-icons"
      (click)="onClickStickerSelector()"
      matTooltip="{{ 'chat.btnSticker' | translate }}"
    >
      <mat-icon>sentiment_satisfied_alt</mat-icon>
    </button>

    <button
      mat-icon-button
      class="material-icons"
      (click)="onClickTranslation()"
      matTooltip="{{ 'chat.btnTranslate' | translate }}"
    >
      <!--<mat-icon>g_translate</mat-icon>-->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
        />
      </svg>
    </button>
  </div>

  <form
    #replyForm="ngForm"
    (ngSubmit)="onSend($event)"
    (keydown.enter)="onSend($event)"
    fxFlex
    fxLayout="row"
    fxLayoutAlign="start center"
  >
    <mat-form-field
      class="message-text"
      fxFlex
      floatLabel="never"
      appearance="standard"
    >
      <textarea
        matInput
        #replyInput
        placeholder="{{ 'chat.typeMessage' | translate }}"
        ngModel
        name="message"
        [matTextareaAutosize]="true"
        [matAutosizeMaxRows]="20"
      ></textarea>
    </mat-form-field>

    <button
      class="send-message-button bg-accent-darkest"
      mat-icon-button
      type="submit"
      aria-label="Send message"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="butt"
        stroke-linejoin="round"
      >
        <path d="M12 19V6M5 12l7-7 7 7" />
      </svg>
    </button>
  </form>
</div>
