{% extends 'base.html' %}
{% load timesinceabbr %}
{% block bodyid %}body-topic{%endblock%}
{% block content %}
<main class="wide">
     <div class="">{% if messages %}
        <ul class="messages">
            {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
                    {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
                </li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
   <article class="topic-container single-col">
        <div class="topic-header">
            <h1>{{object.title}}</h1>
            <h2 class="category-name">
                <a class="name" href="{{object.category.get_absolute_url}}"><span class="color-box" style="background-color: {{object.category.color_rgb}}"></span><span class="strong nb-name">{{object.category.name}}</span></a>
            </h2>
        </div>
    <ol id="post-list">{% for post in object.post_set.all %}
        <li class="post-list-item">
            <div class="post-header">
                <div class="avatar"><img src="{{post.user.get_avatar_url}}" alt="avatar for {{post.user.username}}" /></div>
                <div class="username">
                    {{post.user.username}}
                </div>
                <div class="user-title">
                    {{post.user.category}}
                </div>
                <div class="post-created">
                    {{post.date_created|timesinceabbr}}
                </div>
            </div>
            <div class="post-body">
                {{post.body_html}}
            </div>
            <div class="post-footer">
                
            </div>
        </li>
        {% endfor %}</ol>


<table id="" class="topic-list">
    <thead>
        <tr>
            <th data-sort-order="default" class="default">Topic</th>
            <th data-sort-order="users" class="topic-users sortable num"></th>
            <th data-sort-order="posts" class="topic-posts sortable num">Replies</th>
            <th data-sort-order="views" class="topic-views sortable num">Views</th>
            <th data-sort-order="activity" class="topic-age">Activity</th>
        </tr>
    </thead>
    <tbody>
    {% for object in object_list %}
        <tr id="{{object.id}}" class="topic-list-item">
            <td class="" colspan="1">
                {% if object.statuses%}<div class="topic-statuses">
                        <a href="" title="" class="topic-status"><svg class="fa d-icon d-icon-thumbtack svg-icon pinned svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#thumbtack"></use></svg></a>
                </div>{%endif%}
                    <a href="{{object.get_absolute_url}}" class="title" data-topic-id="{{object.id}}">{{object.title}}</a>
                    <span class="topic-post-badges"></span>
                    {% if object.pinned %}<div class="topic-excerpt">{{object.except}}
                        <a href="/t/lets-use-math-my-nerds/10030">read more</a>{%endif%}
                    <div class="category">
                    <a href="{{object.category.get_absolute_url}}"><span class="color-box" style="background-color: {{object.category.color_rgb}}"></span>{{object.category}}</a>
                    </div>
            </td>
            <td class="topic-users">
                {% for user in object.user_set.all %}<a href="{{user.get_forum_url}}"><img alt="avatar for {{user}}" src="{{user.get_avatar_url}}" /></a>{%endfor%}
            </td>
            <td class="topic-posts center">
                {{object.reply_count}}
            </td>
            <td class="topic-views center">
                {{object.views}}
            </td>
            <td class="topic-age center">
            </td>
        </tr>
    {% endfor %}
</table>
    </article>
</main>
{% endblock %}






{% block extra %}
{% if login_form %}
<div class="overlay-content" id="js-overlay-content" style="display: none;">
    {% include 'lib/login.html' with form=login_form %}
</div>
{% endif %}
{%endblock%}
{% block jsdomready %}
{% if login_form %}
  // Select your overlay trigger
  var trigger = document.querySelector('#overlay-trigger');
  trigger.addEventListener('click', function(e){
    e.preventDefault();
    novicell.overlay.create({
      'selector': trigger.getAttribute('data-element'),
      'class': 'selector-overlay',
    });
  });
{% endif %}
{%endblock%}