<div id="session-hover" class="hidden bubble">

</div>

<script type="text/javascript">
  var $scope = $("#session-hover");
  var rest = JK.Rest();
  
  function addSessionLike(sessionId) {
    rest.addSessionLike(sessionId, JK.currentUserId)
        .done(function(response) {
            $("#spnLikeCount", "#session-hover").html(parseInt($("#spnLikeCount", "#session-hover").text()) + 1);
            $("#btnLike", "#session-hover").unbind("click");
        });
  }
</script>

<script type="text/template" id="template-hover-session">
  <div class="bubble-inner">
    <div class="small left">{genre}</div>
    <div class="small right">{created_at}</div>
    <br clear="all" />
    <div class="f11 mt5 mb5"><b>{name}</b></div>
    <div class="f11 mt5 mb5">{description}</div>
    <div class="small">
      <span id="spnCommentCount">{comment_count}</span> <img src="/assets/content/icon_comment.png" title="comments" width="13" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
      <span id="spnLikeCount">{like_count}</span> <img src="/assets/content/icon_like.png" title="likes" width="12" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
    </div>
    <br />
    MUSICIANS:<br /><br />
    <table class="musicians" cellpadding="0" cellspacing="5">
      {musicians}
    </table>
    <br />
    SCHEDULE:<br />
    <div class="f11 mt5 mb5">{start_time}</div>
    <div class="f11 mt5 mb5">{recurrence}</div>
    <br />
    <div align="center">
      <div class="left"><a id="btnLike" onclick="addSessionLike('{musicSessionId}');" class="button-orange">LIKE</a></div>
      <div style="display:none;" class="left"><a id="btnComment" class="button-orange">COMMENT</a></div>
      <div class="left"><a id="btnShare" layout-link="share-dialog" class="button-orange">SHARE</a></div>
      <div class="left"><a href="{url}" class="button-orange" rel="external" target="_blank">{externalLinkText}</a></div>
    </div>
    <br /><br />
  </div>
</script>