<template>

  <div class="page" data-name="catalog">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <!-- Back button -->
             <span class="ios-only">Back</span>
          </a>
        </div>
        <div class="title">{{board.name}}</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block block-strong">
        <img src="./images/{{board.image}}" alt="{{board.name}}" class="full_images" >
      </div>
    </div>

  </div>

</template>

<script>        
  
  return {
    
    data: function () {

      // Get param
      var boardId = this.$route.params.id;

      bID = boardId; 

      var currentBoard;
      
      // Return back a board where ID match
      this.$root.boards.forEach(function (board) {
        if (board.id == boardId) {
          currentBoard = board;
        }
      });
      
      return {
        board: currentBoard,
      };
    }
  };

</script>