<template>
  <div class="body position-absolute h-100 w-100">
    <Navbar/>
    <div id="game" class="container h-75">
      <div class="row h-100">
        <div id="chat" class="col-3 h-100" style="border: 1px solid black;">
          <div class="row h-75" style="border: 1px solid black;">
            <div class="col w-100 h-100" style="border: 1px solid black;">
            </div>
          </div>
          <div class="row h-25" style="border: 1px solid black;">
            <div class="col w-100 h-75 pt-4">
              <form @submit="onSubmit">
                <Input :information="input" />
              </form>
            </div>
          </div>
        </div>
        <div class="col-9 h-100" style="border: 1px solid black;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Navbar from '@/components/Navbar'
  import Input from '@/components/Input'

  export default {
    name: 'Game',
    components: {
      Navbar,
      Input
    },
    data() {
      return {
        input: { type: 'text', id: 'message', placeholder: 'Ecrivez votre message' }
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
      }
    }
  }
</script>

<style>
  #chat {
    background: linear-gradient(rgb(10, 50, 20), rgb(30, 120, 60), rgb(10, 50, 20));
  }
  #game {
    background: linear-gradient(rgb(10, 50, 20), rgb(20, 85, 40), rgb(10, 50, 20));
  }
</style>