<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>
          <ng-container
            *ngIf="
              registPartnerStoreDataSource.data.length > 0;
              else noRegistPartnerRecommendation
            "
          >
            <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
              <table
                class="min-w-240 overflow-y-visible"
                mat-table
                [dataSource]="registPartnerStoreDataSource"
              >
                <!-- Checkbox Column -->
                <ng-container matColumnDef="select">
                  <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox
                      (change)="$event ? __toggleAllRows() : null"
                      [checked]="selection.hasValue() && __isAllSelected()"
                      [indeterminate]="
                        selection.hasValue() && !__isAllSelected()
                      "
                      [aria-label]="__checkboxLabel()"
                    >
                    </mat-checkbox>
                  </th>
                  <td mat-cell *matCellDef="let row">
                    <mat-checkbox
                      (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)"
                      [aria-label]="__checkboxLabel(row)"
                    >
                    </mat-checkbox>
                  </td>
                </ng-container>

                <!-- Total -->
                <ng-container matColumnDef="referrerMember">
                  <th mat-header-cell *matHeaderCellDef>상위</th>
                  <td mat-cell *matCellDef="let info">
                    <span class="font-medium text-right">
                      {{ __getRefererMember(info) }}
                    </span>
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="memberClass">
                  <th mat-header-cell *matHeaderCellDef>등급</th>

                  <td mat-cell *matCellDef="let info">
                    {{ info.getMemberClass()?.getName() }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="username">
                  <th mat-header-cell *matHeaderCellDef>아이디</th>
                  <td mat-cell *matCellDef="let info">
                    {{ info.getUsername() }}
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="nickname">
                  <th mat-header-cell *matHeaderCellDef>닉네임</th>
                  <td mat-cell *matCellDef="let info">
                    {{ info.getNickname() }}
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="amountMoney">
                  <th mat-header-cell *matHeaderCellDef>머니</th>
                  <td mat-cell *matCellDef="let info">1000원</td>
                </ng-container>

                <ng-container matColumnDef="comp">
                  <th mat-header-cell *matHeaderCellDef>콤프</th>
                  <td mat-cell *matCellDef="let info">0P</td>
                </ng-container>

                <ng-container matColumnDef="bankInfo">
                  <th mat-header-cell *matHeaderCellDef>계좌정보</th>
                  <td mat-cell *matCellDef="let info">
                    <span>{{ info.getBankAccount() }}</span>
                    <span>{{ info.getBankAccount() }}</span>
                    <span>{{ info.getBankAccount() }}</span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="state">
                  <th mat-header-cell *matHeaderCellDef>상태</th>
                  <td mat-cell *matCellDef="let info">정상</td>
                </ng-container>

                <ng-container matColumnDef="site">
                  <th mat-header-cell *matHeaderCellDef>사이트</th>
                  <td mat-cell *matCellDef="let info">
                    {{ info.getSite().getUrl() }}
                  </td>
                </ng-container>
                <ng-container matColumnDef="stroeTableFooter">
                  <td
                    class="py-6 px-0 border-0"
                    mat-footer-cell
                    *matFooterCellDef
                    colspan="10"
                  >
                    <div>
                      <button mat-stroked-button>추천인으로 추가</button>
                    </div>
                  </td>
                </ng-container>

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

              <mat-paginator
                [pageSizeOptions]="[5, 10, 25, 100]"
                aria-label="Select page of users"
              ></mat-paginator>
            </div>
          </ng-container>

          <ng-template #noRegistPartnerRecommendation>
            <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>
        <!-- Budget details -->
        <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>
          <ng-container
            *ngIf="
              removePartnerStoreDataSource.data.length > 0;
              else noRemovePartnerRecommendation
            "
          >
            <div class="flex flex-col flex-auto">
              <table
                class="min-w-240 overflow-y-visible"
                mat-table
                [dataSource]="removePartnerStoreDataSource"
              >
                <!-- Checkbox Column -->
                <ng-container matColumnDef="select">
                  <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox
                      (change)="$event ? __toggleAllRows() : null"
                      [checked]="selection.hasValue() && __isAllSelected()"
                      [indeterminate]="
                        selection.hasValue() && !__isAllSelected()
                      "
                      [aria-label]="__checkboxLabel()"
                    >
                    </mat-checkbox>
                  </th>
                  <td mat-cell *matCellDef="let row">
                    <mat-checkbox
                      (click)="$event.stopPropagation()"
                      (change)="$event ? selection.toggle(row) : null"
                      [checked]="selection.isSelected(row)"
                      [aria-label]="__checkboxLabel(row)"
                    >
                    </mat-checkbox>
                  </td>
                </ng-container>
                <!-- Total -->
                <ng-container matColumnDef="referrerMember">
                  <th mat-header-cell *matHeaderCellDef>상위</th>
                  <td mat-cell *matCellDef="let info">
                    <span class="font-medium text-right">
                      {{ __getRefererMember(info) }}
                    </span>
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="memberClass">
                  <th mat-header-cell *matHeaderCellDef>등급</th>

                  <td mat-cell *matCellDef="let info">
                    {{ info.getMemberClass()?.getName() }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="username">
                  <th mat-header-cell *matHeaderCellDef>아이디</th>
                  <td mat-cell *matCellDef="let info">
                    {{ info.getUsername() }}
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="nickname">
                  <th mat-header-cell *matHeaderCellDef>닉네임</th>
                  <td mat-cell *matCellDef="let info">
                    {{ info.getNickname() }}
                  </td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="isUse">
                  <th mat-header-cell *matHeaderCellDef>사용여부</th>
                  <td mat-cell *matCellDef="let info">Y</td>
                </ng-container>

                <!-- Expenses amount -->
                <ng-container matColumnDef="memberCount">
                  <th mat-header-cell *matHeaderCellDef>회원수</th>
                  <td mat-cell *matCellDef="let info">1</td>
                </ng-container>

                <ng-container matColumnDef="stroeTableFooter">
                  <td
                    class="py-6 px-0 border-0"
                    mat-footer-cell
                    *matFooterCellDef
                    colspan="10"
                  >
                    <div>
                      <button mat-stroked-button>추천인삭제</button>
                    </div>
                  </td>
                </ng-container>

                <tr
                  mat-header-row
                  *matHeaderRowDef="removePartnerStoreTableColumns"
                ></tr>
                <tr
                  mat-row
                  *matRowDef="let row; columns: removePartnerStoreTableColumns"
                ></tr>

                <tr
                  class="h-16 border-0"
                  mat-footer-row
                  *matFooterRowDef="['stroeTableFooter']"
                ></tr>
              </table>
              <mat-paginator
                [pageSizeOptions]="[5, 10, 25, 100]"
                aria-label="Select page of users"
              ></mat-paginator>
            </div>
          </ng-container>

          <ng-template #noRemovePartnerRecommendation>
            <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>
