<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Asset Selection Test</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #f5f5f5;
    }
    tr:hover {
      background-color: #f9f9f9;
    }
    tr.selected {
      background-color: #e3f2fd;
    }
    .checkbox {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .info {
      margin-top: 20px;
      padding: 15px;
      background-color: #f0f0f0;
      border-radius: 4px;
    }
    button {
      padding: 8px 16px;
      margin-right: 10px;
      cursor: pointer;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
    }
    button:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>Asset Selection Test</h1>
    <p>Testing checkbox selection with array-based v-model</p>

    <div>
      <button @click="selectAll">Select All</button>
      <button @click="deselectAll">Deselect All</button>
      <button @click="selectFirst3">Select First 3</button>
    </div>

    <table>
      <thead>
        <tr>
          <th style="width: 50px;">
            <input 
              type="checkbox" 
              class="checkbox"
              :checked="isAllSelected"
              @change="toggleSelectAll"
            />
          </th>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody>
        <tr 
          v-for="asset in assets" 
          :key="asset.id"
          :class="{ selected: selectedAssets[asset.id] }"
        >
          <td>
            <input 
              type="checkbox" 
              class="checkbox"
              :checked="selectedAssets[asset.id]"
              @change="toggleAssetSelection(asset.id, $event.target.checked)"
            />
          </td>
          <td>{{ asset.id }}</td>
          <td>{{ asset.name }}</td>
          <td>{{ asset.category }}</td>
        </tr>
      </tbody>
    </table>

    <div class="info">
      <h3>Selection Info</h3>
      <p><strong>Selected Count:</strong> {{ getSelectedCount }} / {{ assets.length }}</p>
      <p><strong>Selected IDs:</strong> {{ getSelectedIds().join(', ') || 'None' }}</p>
      <p><strong>All Selected:</strong> {{ isAllSelected ? 'Yes' : 'No' }}</p>
    </div>
  </div>

  <script>
    const { createApp, ref, computed } = Vue;

    createApp({
      setup() {
        const assets = ref([
          { id: 1, name: 'Character_Hero', category: 'Characters' },
          { id: 2, name: 'Prop_Sword', category: 'Props' },
          { id: 3, name: 'Set_Castle', category: 'Sets' },
          { id: 4, name: 'Vehicle_Car', category: 'Vehicles' },
          { id: 5, name: 'Character_Villain', category: 'Characters' },
          { id: 6, name: 'Prop_Shield', category: 'Props' },
        ]);

        // Using object with boolean values instead of array
        const selectedAssets = ref({});

        const isAllSelected = computed(() => {
          return assets.value.length > 0 && 
                 assets.value.every(a => selectedAssets.value[a.id]);
        });

        const getSelectedIds = () => {
          return Object.keys(selectedAssets.value)
            .filter(id => selectedAssets.value[id])
            .map(id => Number(id));
        };

        const getSelectedCount = computed(() => {
          return getSelectedIds().length;
        });

        const toggleSelectAll = (event) => {
          const checked = event.target.checked;
          assets.value.forEach(asset => {
            selectedAssets.value[asset.id] = checked;
          });
        };

        const toggleAssetSelection = (assetId, checked) => {
          selectedAssets.value[assetId] = checked;
        };

        const selectAll = () => {
          assets.value.forEach(asset => {
            selectedAssets.value[asset.id] = true;
          });
        };

        const deselectAll = () => {
          selectedAssets.value = {};
        };

        const selectFirst3 = () => {
          selectedAssets.value = {};
          assets.value.slice(0, 3).forEach(asset => {
            selectedAssets.value[asset.id] = true;
          });
        };

        return {
          assets,
          selectedAssets,
          isAllSelected,
          getSelectedIds,
          getSelectedCount,
          toggleSelectAll,
          toggleAssetSelection,
          selectAll,
          deselectAll,
          selectFirst3
        };
      }
    }).mount('#app');
  </script>
</body>
</html>
