<template>
  <div class="lobby">
    <user-ribbon class="lobby-ribbon" username="Josie Péritel" pathToImage="avatar/criquette.jpg"/>
    <div class="lobby-content">
      <div class="lobby-column">
        <page-title pagetitle="Parties"/>
        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitMenu">
            <button-text id="profile" width="100%" height="130px" text="Profil"/>
            <button-text id="new" width="100%" height="130px" text="Créer une partie"/>
        </form>
        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitJoinPrivate">
            <text-input class="lobby-text-input" id="code" label="Code de la partie"/>
            <button-text id="new" width="100%" height="130px" text="Rejoindre partie privée"/>
        </form>
        
      </div>
      <div class="lobby-column games-list">
        
        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitJoinPublic">
            <button-text v-for="game of games" :key="game.id" :id="game.id" width="100%" height="80px" :text="game.name"/>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import UserRibbon from '@/components/UserRibbon.vue'
import PageTitle from '../components/PageTitle.vue'
import ButtonText from '../components/ButtonText.vue'
import TextInput from '../components/form/TextInput.vue'


export default {
  name: 'lobby',
  components: {
    UserRibbon,
    PageTitle,
    ButtonText,
    TextInput
  },
  methods: {
    onSubmitMenu: function(){
      if (event.submitter.id=='profile') {
        this.$router.push('profile');
      }
      if (event.submitter.id=='new') {
        this.$router.push('new');
      }
    },
    onSubmitJoinPrivate: function(){
      this.$router.push('joinprivate/'+document.getElementById('code').value);

    },
    onSubmitJoinPublic: function(event){
      this.$router.push('joinpublic/'+event.submitter.id);

    }
  },
  data () {
    return {
      games: [
        {id: 1, name: "Partie 1"},
        {id: 2, name: "Partie 2"},
        {id: 3, name: "Partie 3"},
        {id: 4, name: "Partie 4"}
      ]
    }
    
  }
}
</script>

<style>
.lobby-ribbon{
  margin-left:auto; 
  margin-right:0;
}

.lobby-content{
  display: flex;
  flex-direction: row;
}

.lobby-column{
  width:50%;
  display: flex;
  flex-direction: column;
  padding: 0 60px;
}

.lobby-menu-form{
  width:100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.lobby{
  display: flex;
  flex-direction: column;
}



.lobby-text-input{
  margin: 0;
  padding: 20px;
  background: rgba(196, 196, 196, 0.6);
  margin-bottom: 36px;
}

.games-list{
  height: 100%;
}
</style>
