<div class="course-nav-tabs">
  <ul class="nav nav-pills mbl" id="course-nav-tabs">
    <li class="active">
      <a href="#course-about-pane" class="btn-index" data-anchor="#course-about-pane">课程介绍</a>
    </li>
    {% if course.goals %}
    <li>
      <a href="#course-goal-pane" class="btn-index" data-anchor="#course-goal-pane">课程目标</a>
    </li>
    {% endif %}
    {% if course.audiences %}
    <li>
      <a href="#course-audience-pane" class="btn-index" data-anchor="#course-audience-pane">适合人群</a>
    </li>
    {% endif %}
    <li>
      <a href="#course-list-pane" class="btn-index" data-anchor="#course-list-pane">课程列表</a>
    </li>
    <li>
      <a href="#course-review-pane" class="btn-index" data-anchor="#course-review-pane">
        课程评价
        <span class="badge">{{ course.ratingNum }}</span>
      </a>
    </li>
  </ul>
</div>

{% embed "TopxiaWebBundle:Bootstrap:panel.html.twig" with {'id' : 'course-about-pane'} %}
  {% block heading %}
    <h3 class="panel-title">课程介绍</h3>
  {% endblock %}
  {% block body %}

    {% if course.about %}
      {{ course.about|raw }}
    {% else %}
      <span class="text-muted">还没有课程介绍...</span>
    {% endif %}
    {% if tags %}
      <div class="mtm">
      <span class="text-muted">标签：</span>{% for tag in tags %}
      <a href="{{ path('tag_show', {name:tag.name}) }}" class="mrs">{{ tag.name }}</a>
      {% endfor %}
      </div>
    {% endif %}

  {% endblock %}
{% endembed %}

{% if course.goals %}
  {% embed "TopxiaWebBundle:Bootstrap:panel.html.twig" with {'id' : 'course-goal-pane'} %}
    {% block heading %}
      <h3 class="panel-title">课程目标</h3>
    {% endblock %}
    {% block body %}
      <ul class="media-list">
        {% for goal in course.goals  %}
        <li class="media">
          <div class="pull-left">
            <span class="glyphicon glyphicon-flag media-object"></span>
          </div>
          <div class="media-body">{{ goal }}</div>
        </li>
        {% endfor %}
      </ul>
    {% endblock %}
  {% endembed %}
{% endif %}

{% if course.audiences %}
  {% embed "TopxiaWebBundle:Bootstrap:panel.html.twig" with {'id' : 'course-audience-pane'} %}
    {% block heading %}
      <h3 class="panel-title">适合人群</h3>
    {% endblock %}
    {% block body %}
      <ul class="media-list">
        {% for audience in course.audiences %}
        <li class="media">
          <div class="pull-left">
            <span class="glyphicon glyphicon-user media-object"></span>
          </div>
          <div class="media-body">{{ audience }}</div>
        </li>
        {% endfor %}
      </ul>
    {% endblock %}
  {% endembed %}
{% endif %}

{% embed "TopxiaWebBundle:Bootstrap:panel.html.twig" with {'id' : 'course-list-pane'} %}
  {% block heading %}
<h3 class="panel-title">课时列表</h3>
{% endblock %}
  {% block body %}

    {% include 'TopxiaWebBundle:CourseLesson:item-list-multi.html.twig' with {experience: true} %}

  {% endblock %}
{% endembed %}

{% embed "TopxiaWebBundle:Bootstrap:panel.html.twig" with {'id' : 'course-review-pane'} %}
  {% block heading %}
    <h3 class="panel-title">课程评价</h3>
  {% endblock %}
  {% block body %}

    <div id="course-review-pane-show" data-url="{{ path('course_review_list', {id:course.id, previewAs:previewAs}) }}">正在载入课程评价数据...</div>

  {% endblock %}
{% endembed %}