{% load i18n static %}


<div id="news-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    {% for value in news %}
    <div class="item {% if forloop.first %}active{% endif %}">
      {% if value.image %}
        <img src="{% get_media_prefix %}{{ value.image }}" class="img-responsive">
      {% else %}
        <img src="{% get_media_prefix %}{{ value.category.image_category }}" class="img-responsive">
      {% endif %}
      <div class="newscarousel-caption">
        <div id="news-body">
          <strong>{{ value.title }}</strong><br/><br/>
          {{ value.body|safe|truncatewords:40 }}<br/>
        </div>
        <i class="fa fa-user"></i>
        <span class="visible-desktop">
          <em>{% trans "By" %} {{ value.sender.get_full_name }} - {{ value.created }}</em>
        </span>&nbsp; &nbsp;
        <a href="{% url "news-detail" value.id value.title|slugify %}" class="btn btn-default btn-xs" title="read all">{% trans "read more" %}</a>
      </div> 
    </div>
    {% endfor %}
  </div>{# .carousel-inner #}

  <ul class="list-group col-sm-4">
    {% for value in news %}
      <li data-target="#news-carousel" data-slide-to="{{ forloop.counter0 }}"
        class="list-group-item {% if forloop.first %}active{% endif %}">
          <h4>{{ value.title }} <br/><br/><small class="pull-right">{{ value.created }}</small></h4>
      </li>
    {% endfor %} 
  </ul>

  <div class="carousel-controls">
    <a class="left carousel-control news-carousel-control" href="#news-carousel" data-slide="prev">‹</a>
    <a class="right carousel-control news-carousel-control" href="#news-carousel" data-slide="next">›</a>
  </div>
</div>{# .carousel slide #}