{% if trakt %}
<div id="trakt" class="module generic" data-module="trakt">

  <div class="module_settings"><span>Settings</span></div>
  <div class="module_remove"><span>Remove</span></div>
  
  <h2>trakt.tv Shouts</h2>

  <div class="inner">

    {% if trakt.shouts %}

      <h3>What others are saying</h3>

      <ul class="shouts">
        {% for shout in trakt.shouts[0:5] %}
          <li{% if shout.user.username == trakt_username %} class="me"{% endif %}>
            <a class="user" href="{{ shout.user.url }}" title="Visit {{ shout.user.username }}">
              {% if shout.user.full_name %}{{ shout.user.full_name }}
              {% else %}{{ shout.user.username }}{% endif %}
            </a>
            said:
            <a href="{{ shout.user.url }}">
              <img class="avatar" src="{{ shout.user.avatar }}" width="20" height="20" alt="">
            </a>
            <p class="shout clearfix">
              <span class="truncated" {% if shout.spoiler %}style="display: none;"{% endif %}>{{ shout.shout|truncate(160, false) }}</span>
              {% if shout.spoiler %}<span class="spoiler_alert">Spoiler Alert!</span> <a class="expand" href="#" title="Show Post">[+]</a>{% endif %}
              <span class="expanded" style="display: none;">{{ shout.shout }}</span>
              {% if shout.shout|count > 160 %}
                {% if not shout.spoiler %}
                  <a class="expand" href="#" title="More">[+]</a>
                {% endif %}
              {% endif %}
            </p>
          </li>
        {% endfor %}
      </ul>

    {% endif %}

    {% if show_add_shout %}

      <div id="add_shout" data-type="{{ trakt.type }}" data-itemid="{{ trakt.itemid }}"{% if trakt.type == 'episode' %} data-season="{{ trakt.season }}" data-episode="{{ trakt.episode }}"{% endif %}>

        <h3>What do you think of {{ trakt.title }}?</h3>

        <textarea rows="5" cols="20"></textarea>

        <div class="clearfix">

          <label class="spoiler">
            <input type="checkbox">
            Shout contains spoiler
          </label>

          <div class="submit_wrapper clearfix">
            <div class="submit">Shout about it</div>
          </div>

        </div>
      </div>

    {% endif %}

  </div>
</div>

{% else %}
<div id="trakt_inactive" class="inactive_module" data-module="trakt">
  <div class="module_settings"><span>Settings</span></div>
  <div class="module_remove"><span>Remove</span></div>
  <h2>trakt.tv Shouts</h2>
</div>
{% endif %}
