<div id="users" class="page-layout carded fullwidth inner-scroll">
  <!-- TOP BACKGROUND -->
  <div class="top-bg accent"></div>
  <!-- / TOP BACKGROUND -->

  <!-- CENTER -->
  <div class="center">
    <!-- HEADER -->
    <div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
      fxLayoutAlign.gt-xs="space-between center">
      <!-- APP TITLE -->
      <div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
        <mat-icon class="logo-icon s-32 mr-16" [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }">
          shopping_basket
        </mat-icon>
        <span class="logo-text h1" [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }">Users</span>
      </div>
      <!-- / APP TITLE -->

      <!-- SEARCH -->

      <!-- <div class="search-wrapper  ml-sm-32">
        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
          <mat-icon>search</mat-icon>
          <input #filter placeholder="Search for an order" />
        </div>
      </div> -->
      <!-- / SEARCH -->
    </div>
    <div class="center">
      <app-list-search></app-list-search>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT CARD -->
    <div class="content-card">
      <mat-table class="users-table" #table [dataSource]="dataSource" matSort [@animateStagger]="{ value: '50' }"
        fusePerfectScrollbar>
        <!-- ID/Nickname Column -->
        <ng-container matColumnDef="username">
          <mat-header-cell *matHeaderCellDef mat-sort-header>아이디</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">{{ user.username }}</p>
          </mat-cell>
        </ng-container>

        <!-- Phone Column -->
        <ng-container matColumnDef="phone">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>연락처</mat-header-cell>
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <!-- <p class="text-truncate">{{ user.phone }}</p> -->
            <p class="text-truncate">010-3004-2001</p>
          </mat-cell>
        </ng-container>

        <!-- Status Column -->
        <!--
        <ng-container matColumnDef="status">
          <mat-header-cell *matHeaderCellDef mat-sort-header>상태</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              {{ user.status }}
              정상
            </p>
          </mat-cell>
        </ng-container>
        -->
        <!-- Total Price Column -->
        <ng-container matColumnDef="totalPrice">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>보유금</mat-header-cell>
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-md>
            <p class="total-price text-truncate">
              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
              1,000,000
            </p>
          </mat-cell>
        </ng-container>

        <!-- Point Column -->
        <ng-container matColumnDef="point">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>포인트</mat-header-cell>
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <p class="text-truncate">
              <!-- {{ user.point }} -->
              5000
            </p>
          </mat-cell>
        </ng-container>

        <!-- Level Column -->
        <ng-container matColumnDef="level">
          <mat-header-cell *matHeaderCellDef mat-sort-header>레벨</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
            <p class="text-truncate">
              <!-- {{ user.level }} -->
              브론즈
            </p>
          </mat-cell>
        </ng-container>

        <!-- Charge Money Column -->
        <ng-container matColumnDef="chargeMoney">
          <mat-header-cell *matHeaderCellDef mat-sort-header>충전금</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate ">
              <!-- {{ user.chargeMoney }} -->
              1,000,000
            </p>
          </mat-cell>
        </ng-container>

        <!-- Exchange Money Column -->
        <ng-container matColumnDef="exchangeMoney">
          <mat-header-cell *matHeaderCellDef mat-sort-header>환전금</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate ">
              <!-- {{ user.exchangeMoney }} -->
              0
            </p>
          </mat-cell>
        </ng-container>

        <!-- Revenue Money Column -->
        <ng-container matColumnDef="revenueMoney">
          <mat-header-cell *matHeaderCellDef mat-sort-header>수익금</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              <!-- {{ user.revenueMoney }} -->
              1,000,000
            </p>
          </mat-cell>
        </ng-container>

        <!-- Number of Bets Column -->
        <ng-container matColumnDef="numberOfBets">
          <mat-header-cell *matHeaderCellDef mat-sort-header>배팅건</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              <!-- {{ user.betNumberof }} -->
              10
            </p>
          </mat-cell>
        </ng-container>

        <!-- Referrals Column -->
        <ng-container matColumnDef="referrals">
          <mat-header-cell *matHeaderCellDef mat-sort-header>추천수</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              <!-- {{ user.referrals }} -->
              10
            </p>
          </mat-cell>
        </ng-container>

        <!-- Recommender Column -->
        <ng-container matColumnDef="recommender">
          <mat-header-cell *matHeaderCellDef mat-sort-header>추천인</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              <!-- {{ user.recommender }} -->
              test
            </p>
          </mat-cell>
        </ng-container>

        <!-- Coupon Status Column -->
        <!-- <ng-container matColumnDef="couponStatus">
          <mat-header-cell *matHeaderCellDef mat-sort-header>쿠폰현황</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
               {{ user.coupon }}
        10
        </p>
        </mat-cell>
        </ng-container>
        -->
        <!-- Register Date Column -->
        <ng-container matColumnDef="registerDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>가입날짜</mat-header-cell>
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <p class="text-truncate">
              {{ user.createdAt | date: 'yyyy-mm-dd HH:mm'}}
            </p>
          </mat-cell>
        </ng-container>

        <!-- Recent Connect Date Column -->
        <ng-container matColumnDef="recentConnectDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>최근접속일</mat-header-cell>
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <p class="text-truncate">
              {{ user.updatedAt | date: 'yyyy-mm-dd HH:mm'}}
            </p>
          </mat-cell>
        </ng-container>

        <!-- Recent Connect IP Column -->
        <ng-container matColumnDef="recentConnectIp">
          <mat-header-cell *matHeaderCellDef mat-sort-header>최근접속IP</mat-header-cell>
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              <!-- {{ user.recentConnectIp }} -->
            </p>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>

        <mat-row *matRowDef="let user; columns: displayedColumns" class="user" matRipple
          [routerLink]="'/pages/users/management/list/' + user.id">
        </mat-row>
      </mat-table>

      <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
      </mat-paginator>
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
</div>