<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
  <!-- Header -->
  <div
    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
  >
    <div class="text-lg font-medium">쪽지함</div>
    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
      <mat-icon
        class="text-current"
        [svgIcon]="'heroicons_outline:x'"
      ></mat-icon>
    </button>
  </div>
  <form
    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
    [formGroup]="composeForm"
  >
    <mat-table
      [dataSource]="dataSource"
      multiTemplateDataRows
      class="mat-elevation-z8"
    >
      <ng-container
        matColumnDef="{{ column }}"
        *ngFor="let column of columnsToDisplay"
      >
        <mat-header-cell *matHeaderCellDef> {{ column }} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element[column] }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="expandedDetail">
        <mat-cell *matCellDef="let element">
          <div
            [@detailExpand]="
              element == expandedElement ? 'expanded' : 'collapsed'
            "
          >
            {{ element.description }}
          </div>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
      <mat-row
        *matRowDef="let element; columns: columnsToDisplay"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element"
        style="cursor: default"
      >
      </mat-row>
      <mat-row
        *matRowDef="let row; columns: ['expandedDetail']"
        class="example-detail-row"
        style="min-height: 0"
      ></mat-row>
    </mat-table>
    <div class="flex flex-col sm:flex-row sm:items-center mt-4 sm:mt-6">
      <div class="flex mt-4 sm:mt-0">
        <!-- Save as draft -->
        <button class="sm:mx-3" mat-stroked-button>
          <span>전체읽음처리</span>
        </button>
        <!-- Send -->
        <button
          class="order-first sm:order-last"
          mat-flat-button
          [color]="'primary'"
        >
          전체삭제처리
        </button>
      </div>
    </div>
  </form>
</div>
