<template>
  <div class="body">
    <Navbar/>
    <div class="container d-flex justify-content-center">
      <div class="card shadow mb-4">
        <h5 class="card-header text-primary">Rejoindre une partie</h5>
        <div class="card-body" style="width : 500px;">
          <form>
            <h5>Avec un identifiant :</h5>
            <Input :information="input" />
            <router-link to="/game">
              <button type="button" class="btn btn-primary btn-block">Commencer</button>
            </router-link>
          </form>
          <form>
            <h5>Sans identifiant :</h5>
            <router-link to="/game">
              <button type="button" class="btn btn-primary btn-block">Trouver une partie</button>
            </router-link>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

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

  export default {
    name: 'GameJoin',
    components: {
      Navbar,
      Input
    },
    data() {
      return {
        input: { type: 'text', id: 'id', placeholder: 'ID' }
      }
    }
  }
</script>

<style>
  form:nth-of-type(2) {
    margin-top: 50px;
  }
</style>