<template name="topicDetail">

  <div class="container">

    <div class="row">
      <div class="col-md-10 col-md-push-1">
        <div class="page-header">
          <h1>Topics</h1>
        </div>

        <ol class="breadcrumb">
          <li><a href="{{ pathFor 'topics' }}">All Topics</a></li>
          <li class="active">{{ truncate topic.title 20 }}</li>
        </ol>

        {{#with topic}}
          {{> _topic}}
        {{/with}}

        <br>

        {{#if topic.presented}}
          <div class="alert alert-info">
            {{> _profilePhoto profile=topic.presenter.profile size="30"}} 
            This topic was presented by <a href="{{ pathFor 'memberDetail' _id=topic.presenterId}}">{{ topic.presenter.profile.name }}</a> at <a href="{{ pathFor 'meetupDetail' _id=topic.meetupId }}">{{ topic.meetup.title }}</a>
          </div>
        {{/if}}

        <div class="page-header">
          {{#if currentUser}}
            <button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#new-comment-modal">
              <i class="ion-plus"></i> Add a Comment
            </button>
          {{/if}}
          <h3>Comments</h3>
        </div>

        <ul class="media-list">
          {{#each comments}}
            {{> _comment}}
          {{/each}}
        </ul>

      </div>

    </div>
  </div>

  <div class="modal fade" id="new-comment-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        {{> _commentForm parentType="topic" parentId=topic._id parentTitle=topic.title}}
      </div>
    </div>
  </div>

</template>
