{% extends 'base.html' %}

{% load static %}
{% load humanize %}
{% load gravatar %}
{% load martortags %}

{% block title %}{{ topic.subject }}{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'board.index' %}">Boards</a></li>
    <li class="breadcrumb-item"><a href="{% url 'board.topics' topic.board.pk %}">{{ topic.board.name }}</a></li>
    <li class="breadcrumb-item active">{{ topic.subject }}</li>
{% endblock %}

{% block content %}

    <div class="mb-4 text-lg-right">
        <a href="{% url 'board.reply.topic' topic.board.pk topic.pk %}" class="btn btn-primary" role="button">Reply</a>
    </div>

    {% for post in topic.posts.all %}
        <div id="{{ post.pk }}"
             class="card bg-dark mb-2 {% if forloop.first %} {% if is_paginated == False or page_obj.number == 1 %}mb-4 border-dark{% else %} mb-2 {% endif %}{% endif %}">
            {% if forloop.first %}
                <div class="card-header text-white bg-dark py-2 px-3">{{ topic.subject }}</div>
            {% endif %}
            <div class="card-body bg-light border-dark p-3">
                <div class="row">
                    <div class="col-2">
                        <img src="{{ post.created_by|gravatar }}" alt="{{ post.created_by.username }}" class="w-100">
                        <small>Posts: {{ post.created_by.posts.count }}</small>
                    </div>
                    <div class="col-10">
                        <div class="row mb-3">
                            <div class="col-6">
                                <strong class="text-muted">{{ post.created_by.username }}</strong>
                            </div>
                            <div class="col-6 text-right">
                                <small class="text-muted">{{ post.created_at }}</small>
                            </div>
                        </div>
                        {{ post.message|safe_markdown }}
                        {% if post.created_by == user %}
                            <div class="mt-3">
                                <a href="{% url 'board.edit.post' post.topic.board.pk post.topic.pk post.pk %}"
                                   class="btn btn-primary btn-sm" role="button">Edit</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    {% include 'includes/pagination.html' %}

{% endblock %}