<div class="flex flex-col flex-auto min-w-0">
  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
    <div class="w-full max-w-screen-xl mx-auto">
      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
        <!-- Budget distribution -->
        <div
          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
        >
          <div class="text-lg font-medium tracking-tight leading-6 truncate">
            팝업 관리
          </div>

          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
            <table
              class="min-w-240 overflow-y-visible"
              mat-table
              [dataSource]="popupDataSource"
            >
              <!-- Index -->
              <ng-container matColumnDef="index">
                <th mat-header-cell *matHeaderCellDef>번호</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.index }}
                  </span>
                </td>
              </ng-container>

              <!-- Title -->
              <ng-container matColumnDef="title">
                <th mat-header-cell *matHeaderCellDef>제목</th>
                <td
                  mat-cell
                  *matCellDef="let info"
                  style="cursor: pointer"
                  (click)="__viewPopupDetail(info.id)"
                >
                  <span class="font-medium text-right">
                    {{ info.title }}
                  </span>
                </td>
              </ng-container>

              <!-- Width -->
              <ng-container matColumnDef="widthSize">
                <th mat-header-cell *matHeaderCellDef>가로</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.widthSize
                  }}</span>
                </td>
              </ng-container>

              <!-- Height -->
              <ng-container matColumnDef="heightSize">
                <th mat-header-cell *matHeaderCellDef>세로</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.heightSize
                  }}</span>
                </td>
              </ng-container>

              <!-- Top -->
              <ng-container matColumnDef="topMargin">
                <th mat-header-cell *matHeaderCellDef>위에서부터</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.topMargin
                  }}</span>
                </td>
              </ng-container>

              <!-- Left -->
              <ng-container matColumnDef="leftMargin">
                <th mat-header-cell *matHeaderCellDef>왼쪽에서부터</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.leftMargin
                  }}</span>
                </td>
              </ng-container>

              <!-- Site -->
              <ng-container matColumnDef="site">
                <th mat-header-cell *matHeaderCellDef>사이트</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{ info.site }}</span>
                </td>
              </ng-container>

              <!-- Is Use -->
              <ng-container matColumnDef="useOrNot">
                <th mat-header-cell *matHeaderCellDef>사용여부</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.useOrNot
                  }}</span>
                </td>
              </ng-container>

              <!-- Btn -->
              <ng-container matColumnDef="btn">
                <th mat-header-cell *matHeaderCellDef>비고</th>
                <td mat-cell *matCellDef="let info">
                  <div class="flex items-center mt-2 py-3 space-x-4">
                    <button
                      class="flex-auto"
                      type="button"
                      mat-stroked-button
                      (click)="__modifyPopup(info.id)"
                    >
                      수정
                    </button>
                    <button class="flex-auto" type="button" mat-stroked-button>
                      삭제
                    </button>
                  </div>
                </td>
              </ng-container>

              <!-- Footer -->
              <ng-container matColumnDef="popupTableFooter">
                <td
                  class="py-6 px-0 border-0"
                  mat-footer-cell
                  *matFooterCellDef
                  colspan="9"
                >
                  <div lass="flex items-center mt-2 py-3 space-x-4">
                    <button mat-stroked-button (click)="__createPopup()">
                      팝업창 만들기
                    </button>
                  </div>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="popupTableColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: popupTableColumns"></tr>
              <tr
                class="h-16 border-0"
                mat-footer-row
                *matFooterRowDef="['popupTableFooter']"
              ></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
