<mat-card class="mat-elevation-z0 ucap-message-write">
  <form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
    <perfect-scrollbar>
      <div class="add-row">
        <button
          mat-button
          (click)="onClickReceiverList()"
          class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
        >
          <mat-icon>add</mat-icon>
          <span class="mat-fab__label">{{
            'message.addReceiver' | translate
          }}</span>
        </button>
        <span
          *ngIf="!!receiverList && receiverList.length > 0"
          class="receiver-sum text-accent-color"
        >
          {{
            'message.countOfReceiver'
              | translate: { count: receiverList.length }
          }}
        </span>
      </div>
      <mat-chip-list #chipList aria-label="receiver selection">
        <mat-chip
          *ngFor="let receiver of receiverList"
          removable="true"
          (removed)="onRemovedReceiver(receiver)"
        >
          {{ receiver.name }}
          <span matChipRemove class="mdi mdi-close"></span>
        </mat-chip>
      </mat-chip-list>

      <!--<mat-form-field class="message-receiver-list">
        <perfect-scrollbar>
          <mat-chip-list #chipList aria-label="receiver selection">
            <mat-chip
              *ngFor="let receiver of receiverList"
              removable="true"
              (removed)="onRemovedReceiver(receiver)"
            >
              {{ receiver.name }}
              <span matChipRemove class="mdi mdi-close"></span>
            </mat-chip>
            <input
              [matChipInputFor]="chipList"
              placeholder="{{ 'message.fieldReceiver' | translate }}"
              readonly
              (click)="onClickReceiverList()"
            />
          </mat-chip-list>
        </perfect-scrollbar>
      </mat-form-field>
      -->

      <mat-form-field class="message-title">
        <input
          matInput
          #inputTitle
          formControlName="title"
          placeholder="{{ 'message.fieldTitle' | translate }}"
          maxlength="100"
        />
        <mat-hint align="end">{{ inputTitle.value?.length || 0 }}/100</mat-hint>
      </mat-form-field>

      <div class="message-content">
        <mat-card-content class="message-write-body">
          <div
            #editor
            class="ucap-message-write-editor"
            contenteditable="true"
            (paste)="onPasteEditor($event)"
            (input)="onInputEditor()"
          ></div>
          <input type="file" #fileInput style="display: none" multiple />
          <mat-list>
            <mat-list-item
              *ngFor="let oldAttachment of oldAttachmentList"
              class="attach-file"
            >
              <div class="file-name">
                <span class="mdi mdi-attachment mdi-18px"> </span
                >{{ oldAttachment.resContent }}
                <button
                  mat-button
                  aria-label="기존파일삭제"
                  (click)="onClickDeleteOldAttachment(oldAttachment)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-trash-2"
                  >
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path
                      d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                    ></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                  </svg>
                </button>
              </div>
            </mat-list-item>
            <mat-list-item
              *ngFor="let attachment of attachmentList"
              class="attach-file"
            >
              <div class="file-name">
                <span class="mdi mdi-attachment mdi-18px"> </span
                >{{ attachment.name }}
                <button
                  mat-button
                  aria-label="파일삭제"
                  (click)="onClickDelelteAttachment(attachment)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-trash-2"
                  >
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path
                      d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                    ></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                  </svg>
                </button>
              </div>
            </mat-list-item>
          </mat-list>
        </mat-card-content>
      </div>
    </perfect-scrollbar>
  </form>

  <div class="message-option">
    <div class="editor-tools">
      <button mat-icon-button aria-label="이미지" (click)="onClickImage()">
        <span class="mdi mdi-camera mdi-24px"></span>
      </button>
      <button
        mat-icon-button
        aria-label="첨부파일"
        (click)="onClickAttachment()"
      >
        <span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
      </button>
    </div>
    <div class="length">
      <span
        [class.editor-length-invalid]="
          0 === contentLength || 1000 < contentLength
        "
        >{{ contentLength }}</span
      >/1000
    </div>
  </div>

  <mat-card-actions>
    <div class="editor-actions-spacer"></div>
    <div class="editor-actions">
      <button mat-stroked-button (click)="onClickCancel()" class="mat-primary">
        {{ 'common.messages.cancel' | translate }}
      </button>
      <button
        mat-flat-button
        *ngIf="!isModify"
        (click)="onClickSend()"
        [disabled]="
          messageWriteForm.invalid ||
          !receiverList ||
          0 === receiverList.length ||
          0 === contentLength ||
          1000 < contentLength
        "
        class="mat-primary"
      >
        {{ 'message.sendTo' | translate }}
      </button>
      <button
        mat-flat-button
        (click)="onClickSendSchedule()"
        [disabled]="
          messageWriteForm.invalid ||
          !receiverList ||
          0 === receiverList.length ||
          0 === contentLength ||
          1000 < contentLength
        "
        class="mat-primary"
      >
        {{ 'message.sendReservation' | translate }}
      </button>

      <!-- <mat-menu #appMenu="matMenu" yPosition="above">
          <button mat-menu-item (click)="onClickSendSchedule()">
            <span class="mdi mdi-send-clock"></span
            ><span>{{ 'message.sendReservation' | translate }}</span>
          </button>
        </mat-menu>

        <ucap-split-button
          *ngIf="!isModify"
          [menu]="appMenu"
          (buttonClick)="onClickSend()"
          [disabled]="
            messageWriteForm.invalid ||
            !receiverList ||
            0 === receiverList.length ||
            0 === contentLength ||
            1000 < contentLength
          "
          >{{ 'message.sendTo' | translate }}</ucap-split-button
        >
        <button
          *ngIf="isModify"
          mat-stroked-button
          (click)="onClickSendSchedule()"
          [disabled]="
            messageWriteForm.invalid ||
            !receiverList ||
            0 === receiverList.length ||
            0 === contentLength ||
            1000 < contentLength
          "
          class="mat-primary"
        >
          {{ 'message.sendReservation' | translate }}
        </button>-->
    </div>
  </mat-card-actions>
</mat-card>
