<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="list links-list searchbar-hide-on-search">
          <ul>
            <li>
              <a class="col button button-fill" href="/snowform/{{board.id}}/">Add review
              </a>                
            </li>
          </ul>
        </div>        
        <div class="block block-strong">
            <a href="/pictures/{{board.id}}/">
              <img src="./images/{{board.image}}" alt="{{board.name}}" class="images" >
            </a> 
        </div>
        <div class="block">
          {{board.description}}
        </div>
        <div class="block-title">Reviews
        </div>
        <div class="block">
          <div class="list links-list">            
            <ul>
              {{#each $root.reviews}} 
              {{#if_compare boardID}}
              <li>
                <p class="review">Username: {{username}}</p>
                <p class="review_date">{{reviewDate}}</p>
                {{#star_rating rating}}
                <!-- Star rating generated by custom helper --> 
                {{/star_rating}}
                <p class="review">{{review}}
                </p>
                <hr/>
              </li> 
              {{/if_compare}}
              {{/each}}
            </ul>
          </div>
        </div> 
      </div>
    </div>
  </template>

  <script>

    //Global variable
    var bID;

    //Custom helper to compare id
    Template7.registerHelper('if_compare', function (a, options) {
      
      if (a == bID) {
        return options.fn(this);
      }
      else {
        return options.inverse(this);
      }
    }
    );

    Template7.registerHelper('star_rating', function (a) {
      console.log(a);
      var stars = "<div class='stars'>";
      for (i=1; i <= 5; i++){
        if (i <= a) {
          stars += "<span class='star on'></span>";
        }
        else {
          stars += "<span class='star'></span>";
        }
      }
      stars += "</div>";
      return stars;
    }
    );

    // Get board details
    return {
      data: function () {
        var snowboardId = this.$route.params.id;
        bID = snowboardId;
        var currentSnowboard;
        this.$root.boards.forEach(function (board) {
          if (board.id == snowboardId) {
            currentSnowboard = board;
          }
        }
        );
        return {
          board: currentSnowboard,
        };
      }
    };
  </script>
  