<template>
  <section class="draftview">
    <section class="playerlist">
      <b>Players</b>
    </section>
    <section class="pool"><b>Card pool</b></section>
    <section class="cardlist"><b>Cards</b></section>
  </section>
</template>

<style lang="scss" scoped>
.draftview {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: 200px 1fr 250px;
  section {
    grid-row: 1;
    border: 1px solid #555;
  }
}

@media (max-width: 800px) {
  .draftview {
    grid-template-columns: 2fr 250px;
    .playerlist {
      grid-row: 1/2;
      grid-column: 2;
    }
    .cardlist {
      grid-row: 2/3;
      grid-column: 2;
    }
    .pool {
      grid-column: 1;
      grid-row: 1/3;
    }
  }
}

@media (max-width: 600px) {
  .draftview {
    grid-template-columns: auto;
    grid-template-rows: 100px 3fr 1fr;
    .playerlist,
    .cardlist,
    .pool {
      grid-row: auto;
      grid-column: auto;
    }
  }
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class DraftView extends Vue {}
</script>