<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"
        >
          <!-- Title -->
          <div class="text-4xl font-extrabold tracking-tight">월현황</div>
          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                <mat-icon svgIcon="chevron-double-left"></mat-icon>
              </button>
            </div>
            <span>2022년6월</span>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                <mat-icon svgIcon="chevron-double-right"></mat-icon>
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                1월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                2월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                3월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                4월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                5월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                6월
              </button>
            </div>
            <div>
              <button mat-flat-button class="bet-mat-small-8" [color]="'warn'">
                7월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                8월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                9월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                10월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                11월
              </button>
            </div>
            <div>
              <button
                mat-flat-button
                class="bet-mat-small-8"
                [color]="'primary'"
              >
                12월
              </button>
            </div>
          </div>
          <!-- Main -->
          <div class="flex flex-auto overflow-hidden">
            <!-- Products list -->
            <div
              class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
            >
              <ng-container *ngIf="monthlys$ | async as monthlys">
                <ng-container *ngIf="monthlys.length > 0; else noMonthly">
                  <div class="grid">
                    <!-- Header -->
                    <div
                      class="monthly-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
                    >
                      <div>요율</div>
                      <div>상부</div>
                      <div>
                        아이디
                        <hr style="margin: 7px 0px" />
                        닉네임
                        <hr style="margin: 7px 0px" />
                        연락처
                      </div>
                      <div>
                        등급
                        <hr style="margin: 7px 0px" />
                        레벨
                      </div>
                      <div class="hidden sm:block">예금주</div>
                      <div class="hidden md:block">보유금</div>
                      <div class="hidden md:block">
                        게임중머니
                        <hr style="margin: 7px 0px" />
                        금일콤프
                      </div>
                      <div class="hidden md:block">총입출</div>
                      <div class="hidden lg:block">카지노->캐쉬</div>
                    </div>
                    <!-- Rows -->
                    <ng-container *ngIf="monthlys$ | async as monthlys">
                      <ng-container
                        *ngFor="let monthly of monthlys; trackBy: __trackByFn"
                      >
                        <div
                          class="monthly-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                        >
                          <div>요율</div>
                          <div>
                            {{ monthly.day }}
                          </div>
                          <div>
                            {{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            {{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            {{ monthly.day }}
                          </div>
                          <div>
                            {{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            LV{{ monthly.day }}
                          </div>
                          <div class="hidden sm:block">
                            {{ monthly.day }}
                          </div>
                          <div class="hidden md:block">
                            캐쉬{{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            콤프{{ monthly.day }}P
                            <hr style="margin: 7px 0px" />
                            쿠폰{{ monthly.day }}
                          </div>
                          <div class="hidden md:block">
                            {{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            {{ monthly.day }}P
                          </div>
                          <div class="hidden md:block">
                            입금{{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            출금{{ monthly.day }}
                            <hr style="margin: 7px 0px" />
                            차익{{ monthly.day }}
                          </div>
                          <div class="hidden lg:block">
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [color]="'primary'"
                            >
                              게임머니확인
                            </button>
                            <hr style="margin: 7px 0px" />
                            <button
                              mat-flat-button
                              class="bet-mat-small-8"
                              [color]="'primary'"
                            >
                              게임머니회수
                            </button>
                          </div>
                        </div>
                      </ng-container>
                    </ng-container>
                  </div>

                  <mat-paginator
                    class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
                    [ngClass]="{ 'pointer-events-none': isLoading }"
                    [length]="pagination?.length"
                    [pageIndex]="pagination?.page"
                    [pageSize]="pagination?.size"
                    [pageSizeOptions]="[5, 10, 25, 100]"
                    [showFirstLastButtons]="true"
                  ></mat-paginator>
                </ng-container>
              </ng-container>

              <ng-template #noMonthly>
                <div
                  class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
                >
                  There are no data!
                </div>
              </ng-template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
