{% import "TopxiaWebBundle::macro.html.twig" as web_macro %}

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">课程教师</h3>
  </div>
  <div class="panel-body">

    {% if course.teacherIds %}
      <div class="teacher-carousel {% if course.teacherIds|length == 1 %}teacher-carousel-onlyone{% endif %}">
        <div class="carousel slide" id="teacher-carousel">
          <div class="carousel-inner">
            {% for teacherId in course.teacherIds %}
              {% set user = users[teacherId] %}
              {% if profiles %}
              {% set profile = profiles[teacherId] %}
              <div class="item {% if loop.first %}active{% endif %}" data-id="{{ user.id }}">
                <a href="{{ path('user_show', {id:user.id}) }}"><img src="{{ filepath(user.largeAvatar, 'avatar.png') }}" class="avatar"></a>
              </div>
              {% endif %}
            {% endfor %}
          </div>
          <a class="left carousel-control" href="#teacher-carousel" data-slide="prev">
            <span class="icon-prev"></span>
          </a>
          <a class="right carousel-control" href="#teacher-carousel" data-slide="next">
            <span class="icon-next"></span>
          </a>
        </div>
        <div class="teacher-detail" id="teacher-detail">
            {% for teacherId in course.teacherIds %}
              {% set user = users[teacherId] %}
              {% if profiles %}
              {% set profile = profiles[teacherId] %}
            <div class="teacher-item teacher-item-{{ user.id }} {% if loop.first %}teacher-item-active{% endif %}">
              <div class="nickname"><a href="{{ path('user_show', {id:user.id}) }}">{{ user.nickname }}</a></div>
              <div class="title">{{ user.title }}</div>
              <div class="divider"></div>
              <div class="about">{{ profile.about | raw }}</div>
            </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% else %}
      <div class="empty">该课程尚未设置教师</div>
    {% endif %}

  </div>
</div>