{% load staticfiles %}

<section class="section section--discourse">
  <div class="e-row e-expanded">
    <div class="section__info section__block e-columns small-12 large-3">
      <a href="{% url 'discourse:colab_discourse' '' %}"><img class="section__logo" src="{% static 'img/logo-expressao.svg' %}" data-fallback="{% static 'img/logo-labhacker.png' %}"></a>
      <p class="section__text">
        Dê sua opinião sobre os assuntos que afetam a sua vida, discutindo soluções com outros cidadãos e os deputados.
      </p>
    </div>

    <div class="section__block e-columns small-12 large-9">
      <div class="section__content">
        <h1 class="section__title">
          <a class="section__link" href="{% url 'discourse:colab_discourse' '' %}" title="Veja todas as discussões">Discussões</a>
          <a class="button section__button" href="{% url 'discourse:colab_discourse' '' %}" title="Ver todos">
            Ver todos
          </a>
        </h1>
        <div class="container container--card-list">
          <ul class="card-list">
            {% for topic in discourse_data %}
              <a class="info-card__link" href="{{topic.get_url}}">
                <li class="info-card info-card--discourse info-card--{{topic.category.slug}}">
                  {# XXX: Add different style when the category is one of the user's prefered themes #}
                  {% if user.is_authenticated %}
                    {% if topic.category in user.profile.prefered_themes.all %}
                    {% endif %}
                  {% endif %}
                  <div class="info-card__header">
                    <div class="info-card__icon"><i class="icon icon-{{topic.category.slug}}"></i></div>
                    <h2 class="info-card__title">{{topic.category.name}}</h2>
                  </div>
                  <p class="info-card__text">
                    {{topic.title}}
                  </p>
                  <div class="info-card__footer">
                    <div class="card-stats">
                      <div class="card-stats__name">Respostas</div>
                      <div class="card-stats__value">{{topic.posts_count}}</div>
                    </div>

                    <div class="card-stats">
                      <div class="card-stats__name">Visualizações</div>
                      <div class="card-stats__value">{{topic.views}}</div>
                    </div>

                    <div class="card-stats">
                      <div class="card-stats__name">Atualização</div>
                      <div class="card-stats__value">{{topic.last_posted_at|date:"b/Y"}}</div>
                    </div>
                  </div>
                </li>
              </a>
            {% empty %}
              <li>
                <div class="section__content-wrapper section__content-wrapper--center text-center">
                  <p class="section__text">
                    Desculpe. Não encontramos nenhuma discussão.
                  </p>
                </div>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>