<template>
  <div id="body">
    <Navbar/>
    <div class="container-fluid" style="display: flex; justify-content: space-around;">
      <div class="card shadow mb-4">
        <div class="card-header py-3">
          <h6 class="m-0 font-weight-bold text-primary">Rejoindre une partie</h6>
        </div>
        <div class="card-body" style="width : 500px;">
          <form class="user" method="post">
            <h5>Avec un identifiant :</h5>
            <div class="form-group">
              <input type="text" class="form-control form-control-user" id="id" placeholder="ID">
            </div>
            <router-link to="/game">
              <a class="btn btn-primary btn-user btn-block">
                Commencer
              </a>
            </router-link>
          </form>
          <form class="user" method="post" style="margin-top: 100px;">
            <h5>Sans identifiant :</h5>
            <router-link to="/game">
              <a class="btn btn-primary btn-user btn-block">
                Trouver une partie
              </a>
            </router-link>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Navbar from '@/components/Navbar.vue'

  export default {
    name: 'GameJoin',
    components: {
      Navbar
    }
  }
</script>