<script>
import axios from 'axios'
export default{
    data: function() {
        return {
            boards: [],
            
        }
    },
    mounted () {
        axios
            .get('http://localhost:1337/api/getBoards')         
            .then(response => (this.boards = response.data))
  }
};

</script>

<template>
    <div class="broad">
        <div class="broadInner">
            <h3 class="boardTitle">Boards</h3>
            <div class="boards">
                <div class="listElement" v-for="board in boards">
                    <button class="board_name" :href="board.board_id"> {{ board.board_name }} </button>
                </div>
            </div>
        </div>  
    </div>
</template>

<style setup>
.broad {
    width: 100vh;
    height: 50vh;
    display: flex;
}
.broadInner {
    padding: 5% 10%;
    background: #000000b9;  /* fallback for old browsers */
    width: 100%;
    border-radius: 1em;
}
.boardTitle {
    font-family: 'Tilt Neon', sans-serif;
    font-size: 2em;
    color: whitesmoke;
    text-align: center;
}
.boards {
    justify-content: center;
    margin-top: 5%;
    padding: 0 10%;
    display: flex;
    flex-wrap: wrap;
}
.listElement {
    min-width: 25%;
    flex: 1;
    padding-right: 5vh;
    padding-top: 1vh;
}


button {
  background-color: #65383fea;
  border-radius: 4px;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  max-width: none;
  min-height: 44px;
  min-width: 10px;
  outline: none;
  overflow: hidden;
  padding: 9px 20px 8px;
  position: relative;
  text-align: center;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

button:hover{
    transition: 0.2s;
    background-color: #65383f43;
}

.board_name {
    font-size: 1em;
    text-decoration: none;
}

</style>

