<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>

          <!-- Search -->
          <div
            class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
          >
            <!-- Card inception -->
            <div class="col-span-2 sm:col-span-1">
              <mat-form-field
                class="fuse-mat-no-subscript w-full"
                [floatLabel]="'always'"
              >
                <input
                  matInput
                  [matDatepicker]="picker1"
                  [placeholder]="'Choose a date'"
                />
                <mat-datepicker-toggle
                  matSuffix
                  [for]="picker1"
                ></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
              </mat-form-field>
            </div>
            <!-- Card expiration -->
            <div class="col-span-2 sm:col-span-1">
              <mat-form-field
                class="fuse-mat-no-subscript w-full"
                [floatLabel]="'always'"
              >
                <input
                  matInput
                  [matDatepicker]="picker2"
                  [placeholder]="'Choose a date'"
                />
                <mat-datepicker-toggle
                  matSuffix
                  [for]="picker2"
                ></mat-datepicker-toggle>
                <mat-datepicker #picker2></mat-datepicker>
              </mat-form-field>
            </div>
            <!-- Actions -->
            <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
              <!-- Search -->
              <!-- Add user button -->
              <button
                mat-flat-button
                [color]="'primary'"
                fxFlex
                (click)="__createProduct()"
              >
                <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
                <span class="ml-2 mr-1">기본데이터생성</span>
              </button>
            </div>
          </div>

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

              <!-- 시작일 -->
              <ng-container matColumnDef="startDate">
                <th mat-header-cell *matHeaderCellDef>시작일</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.startDate }}
                  </span>
                </td>
              </ng-container>
              <!-- 종료일 -->
              <ng-container matColumnDef="endDate">
                <th mat-header-cell *matHeaderCellDef>종료일</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">
                    {{ info.endDate }}
                  </span>
                </td>
              </ng-container>

              <!-- 기본데이터 -->
              <ng-container matColumnDef="defaultDataTotalCount">
                <th mat-header-cell *matHeaderCellDef colspan="2">
                  기본데이터
                </th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.defaultCount
                  }}</span>
                </td>
              </ng-container>
              <ng-container matColumnDef="defaultDataViewBtn">
                <td
                  mat-cell
                  *matCellDef="let info"
                  style="border-left: 1px solid #e0e0e0"
                >
                  <span class="font-medium text-right"
                    ><button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                      (click)="__viewLoosingDetail(info, '1')"
                    >
                      상세보기
                    </button></span
                  >
                </td>
              </ng-container>

              <!-- 루징데이터 -->
              <ng-container matColumnDef="loosingDataTotalCount">
                <th mat-header-cell *matHeaderCellDef colspan="2">
                  루징데이터
                </th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right">{{
                    info.loosingCount
                  }}</span>
                </td>
              </ng-container>
              <ng-container matColumnDef="loosingDataViewBtn">
                <td
                  mat-cell
                  *matCellDef="let info"
                  style="border-left: 1px solid #e0e0e0"
                >
                  <span class="font-medium text-right"
                    ><button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                      (click)="__viewLoosingDetail(info, '2')"
                    >
                      상세보기
                    </button></span
                  >
                </td>
              </ng-container>

              <!-- 삭제 -->
              <ng-container matColumnDef="removeBtn">
                <th mat-header-cell *matHeaderCellDef>삭제</th>
                <td mat-cell *matCellDef="let info">
                  <span class="font-medium text-right"
                    ><button
                      mat-flat-button
                      class="bet-mat-small-8"
                      [color]="'primary'"
                      (click)="__onClickRemoveBtn($event, info.id)"
                    >
                      삭제
                    </button></span
                  >
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="headerTableColumns"></tr>
              <tr
                mat-row
                *matRowDef="let row; columns: displayedTableColumns"
              ></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
