<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
  <!-- Header -->
  <div
    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
  >
    <div class="text-lg font-medium">{{ data.vendor.getName() }}</div>
    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
      <mat-icon
        class="text-current"
        [svgIcon]="'heroicons_outline:x'"
      ></mat-icon>
    </button>
  </div>
  <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 data.gameList">
          <div style="cursor: pointer" (click)="onClickSlotGame(slot)">
            <!-- <img
              class="w-full object-cover border-b"
              [src]="'assets/images/beteran/allbet.jpg'"
            /> -->
            <img
              class="w-full object-cover border-b"
              [src]="getSlotGameImage(slot)"
            />
            <div class="py-4 px-5">
              <div class="text-xl font-semibold">
                {{ getSlotGameName(slot) }}
              </div>
              <div class="mt-1 text-secondary">
                {{ slot.getCategory() }}
              </div>
            </div>
          </div>

          <!-- </a> -->
        </ng-container>
      </div>
    </div>
  </div>
</div>
