<div class="flex flex-col flex-auto min-w-0">
  <!-- Main -->
  <div class="wrapper">
    <div>
      <img class="banner-bg" src="assets/images/beteran/banner-bg.jpg" />
    </div>
    <!-- Header -->
    <!-- Header -->
    <div
      class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
    >
      <!-- Title -->
      <div class="text-4xl font-extrabold tracking-tight">
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.deposit)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">입금신청</span>
        </button>
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.withdraw)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">출금신청</span>
        </button>
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.notice)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">공지사항</span>
        </button>
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.comp)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">콤프</span>
        </button>
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.customer)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">고객센터</span>
        </button>
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.depositHistory)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">입금내역</span>
        </button>
        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="__onClickCompose(composeMenuType.withdrawHistory)"
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">출금내역</span>
        </button>
      </div>
      <!-- Actions -->
      <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
        <div *ngIf="!!loggedIn">
          <div class="grid grid-cols-2 gap-x-4 gap-y-1 ml-auto">
            <div
              class="justify-self-end font-medium tracking-tight text-secondary"
            >
              회원아이디
            </div>
            <div class="font-medium">{{ member?.getUsername() }}</div>
            <div
              class="justify-self-end font-medium tracking-tight text-secondary"
            >
              보유금액
            </div>
            <div class="font-medium">
              {{
                member?.getMemberBalance()?.getBalanceSum()
                  | currency: "KRW":"symbol"
              }}
            </div>
            <div
              class="justify-self-end font-medium tracking-tight text-secondary"
            >
              콤프
            </div>
            <div class="font-medium">3000P</div>
            <div
              class="justify-self-end font-medium tracking-tight text-secondary"
            >
              쪽지
            </div>
            <div class="font-medium">
              <button (click)="__onClickMessage($event)">
                <mat-icon svgIcon="email-outline"></mat-icon></button
              >(0)
            </div>
          </div>
        </div>
        <!-- Search -->

        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="
            __onClickCompose(
              !loggedIn ? composeMenuType.signIn : composeMenuType.modifyMember
            )
          "
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">{{ !loggedIn ? "로그인" : "정보수정" }}</span>
        </button>

        <button
          class="ml-4"
          mat-flat-button
          [color]="'primary'"
          (click)="
            __onClickCompose(
              !loggedIn ? composeMenuType.signup : composeMenuType.signOut
            )
          "
        >
          <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
          <span class="ml-2 mr-1">{{
            !loggedIn ? "회원가입" : "로그아웃"
          }}</span>
        </button>
      </div>
    </div>

    <div>
      <mat-tab-group class="sm:px-2" [animationDuration]="'0'">
        <!-- Home -->
        <mat-tab label="라이브카지노">
          <ng-template matTabContent>
            <!-- Cards -->
            <div class="flex justify-center mt-10 sm:mt-20">
              <div class="w-full max-w-sm md:max-w-7xl">
                <div
                  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
                >
                  <ng-container *ngFor="let casino of hotelCasinos">
                    <!-- <a
                      class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
                      [href]="
                        'https://material.angular.io/components/' + component.id
                      "
                      target="_blank"
                      rel="noreferrer"
                    > -->
                    <div
                      style="cursor: pointer"
                      (click)="onClickGame(casino, 0)"
                    >
                      <img
                        class="w-full object-cover border-b"
                        [src]="'assets/images/beteran/allbet.jpg'"
                      />
                      <div class="py-4 px-5">
                        <div class="text-xl font-semibold">
                          {{ casino.getName() }}
                        </div>
                        <div class="mt-1 text-secondary">
                          {{ casino.getCategory() }}
                        </div>
                      </div>
                    </div>

                    <!-- </a> -->
                  </ng-container>
                </div>
              </div>
            </div>
          </ng-template>
        </mat-tab>

        <!-- Budget -->
        <mat-tab label="호텔카지노">
          <ng-template matTabContent>
            <!-- Cards -->
            <div class="flex justify-center mt-10 sm:mt-20">
              <div class="w-full max-w-sm md:max-w-7xl">
                <div
                  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
                >
                  <ng-container *ngFor="let casino of liveCasinos">
                    <!-- <a
                      class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
                      [href]="
                        'https://material.angular.io/components/' + component.id
                      "
                      target="_blank"
                      rel="noreferrer"
                    > -->
                    <div
                      style="cursor: pointer"
                      (click)="onClickGame(casino, 1)"
                    >
                      <img
                        class="w-full object-cover border-b"
                        [src]="'assets/images/beteran/allbet.jpg'"
                      />
                      <div class="py-4 px-5">
                        <div class="text-xl font-semibold">
                          {{ casino.getName() }}
                        </div>
                        <div class="mt-1 text-secondary">
                          {{ casino.getCategory() }}
                        </div>
                      </div>
                    </div>

                    <!-- </a> -->
                  </ng-container>
                </div>
              </div>
            </div>
          </ng-template>
        </mat-tab>

        <!-- Team -->
        <mat-tab label="슬롯게임">
          <ng-template matTabContent>
            <!-- Cards -->
            <div class="flex justify-center mt-10 sm:mt-20">
              <div class="w-full max-w-sm md:max-w-7xl">
                <div
                  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
                >
                  <ng-container *ngFor="let slot of slotGames">
                    <!-- <a
                      class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
                      [href]="
                        'https://material.angular.io/components/' + component.id
                      "
                      target="_blank"
                      rel="noreferrer"
                    > -->
                    <div style="cursor: pointer" (click)="onClickGame(slot, 2)">
                      <img
                        class="w-full object-cover border-b"
                        [src]="'assets/images/beteran/allbet.jpg'"
                      />
                      <div class="py-4 px-5">
                        <div class="text-xl font-semibold">
                          {{ slot.getName() }}
                        </div>
                        <div class="mt-1 text-secondary">
                          {{ slot.getCategory() }}
                        </div>
                      </div>
                    </div>

                    <!-- </a> -->
                  </ng-container>
                </div>
              </div>
            </div>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
    </div>
    <div
      class="flex flex-col items-center px-6 py-10 sm:px-16 sm:pt-18 sm:pb-20 bg-white dark:bg-gray-800 sm:mt-20"
    >
      <div class="w-full max-w-7xl">
        <!-- Features grid -->
        <div
          class="grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16 w-full mt-12 sm:mt-16"
        >
          <div>
            <span
              class="flex items-center justify-center w-12 h-12 rounded bg-primary"
            >
              <!-- <mat-icon
                class="text-white"
                [svgIcon]="'heroicons_outline:pencil-alt'"
              ></mat-icon> -->
              <img class="icon" src="assets/images/beteran/deposit-icon.png" />
            </span>
            <div class="mt-4 text-xl font-medium">실시간출금</div>
            <div class="mt-2 leading-6 text-secondary">
              Create and edit projects, upload images via drag drop, add
              categories, add custom fields, create interactive forms and more.
            </div>
          </div>
          <div>
            <span
              class="flex items-center justify-center w-12 h-12 rounded bg-primary"
            >
              <!-- <mat-icon
                class="text-white"
                [svgIcon]="'heroicons_outline:filter'"
              ></mat-icon> -->

              <img class="icon" src="assets/images/beteran/withdraw-icon.png" />
            </span>
            <div class="mt-4 text-xl font-medium">실시간입금</div>
            <div class="mt-2 leading-6 text-secondary">
              Search and filter within the projects, categories and custom
              fields. Save search and filter details for easy access.
            </div>
          </div>
          <div>
            <span
              class="flex items-center justify-center w-12 h-12 rounded bg-primary"
            >
              <!-- <mat-icon
                class="text-white"
                [svgIcon]="'heroicons_outline:refresh'"
              ></mat-icon> -->
              <img class="icon" src="assets/images/beteran/notice-icon.png" />
            </span>
            <div class="mt-4 text-xl font-medium">공지사항</div>
            <div class="mt-2 leading-6 text-secondary">
              <!-- Schedule -->
              <div
                class="sm:col-span-2 md:col-span-2 lg:col-span-2 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
              >
                <div class="flex flex-col mt-1 divide-y">
                  <ng-container
                    *ngFor="
                      let scheduleItem of data.schedule['today'];
                      trackBy: trackByFn
                    "
                  >
                    <div
                      class="flex flex-row items-center justify-between py-4 px-0.5"
                    >
                      <div class="flex flex-col">
                        <div class="font-medium">{{ scheduleItem.title }}</div>
                        <div
                          class="flex flex-col sm:flex-row sm:items-center -ml-0.5 mt-2 sm:mt-1 space-y-1 sm:space-y-0 sm:space-x-3"
                        >
                          <ng-container *ngIf="scheduleItem.time">
                            <div class="flex items-center">
                              <mat-icon
                                class="icon-size-5 text-hint"
                                [svgIcon]="'heroicons_solid:clock'"
                              ></mat-icon>
                              <div class="ml-1.5 text-md text-secondary">
                                {{ scheduleItem.time }}
                              </div>
                            </div>
                          </ng-container>
                          <!-- <ng-container *ngIf="scheduleItem.location">
                            <div class="flex items-center">
                              <mat-icon
                                class="icon-size-5 text-hint"
                                [svgIcon]="'heroicons_solid:location-marker'"
                              ></mat-icon>
                              <div class="ml-1.5 text-md text-secondary">
                                {{ scheduleItem.location }}
                              </div>
                            </div>
                          </ng-container> -->
                        </div>
                      </div>
                      <button mat-icon-button>
                        <mat-icon
                          [svgIcon]="'heroicons_solid:chevron-right'"
                        ></mat-icon>
                      </button>
                    </div>
                  </ng-container>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="sn-overlay"></div>
    <button class="scroll-top w-ba" style="display: none">
      <i class="fas fa-caret-up" aria-hidden="true"></i>
    </button>
  </div>
</div>
