<template>
  <AdminTile class="admin-tile-games" title="Games">
    <table>
      <tr>
        <th class="admin-tile-games__table-head">Game name</th>
        <th class="admin-tile-games__table-head">#&nbsp;players</th>
      </tr>
      <tr v-for="id in Object.keys(games)" :key="id">
        <td>{{ games[id].name }}</td>
        <td>{{ games[id].players.length }}</td>
      </tr>
    </table>
  </AdminTile>
</template>

<script>
export default {
  props: ['games'],
}
</script>

<style lang="scss">
.admin-tile-games {
  &__table-head {
    text-align: left;
  }
}
</style>