{% load i18n misago_avatars %}
<div class="container page-header-container">
  <div class="page-header page-header-{% if thread.category.special_role == 'private_threads' %}private-threads{% else %}{{ thread.category.css_class|default:'category-threads' }}{% endif %}">
    <div class="page-header-bg-image">
      <div class="page-header-bg-overlay">
        <div class="page-header-image"></div>
        <div class="page-header-banner page-header-banner-{% if thread.category.special_role == 'private_threads' %}private-threads{% else %}{{ thread.category.css_class|default:'category-threads' }}{% endif %}">
          <div class="page-header-banner-bg-image">
            <div class="page-header-banner-bg-overlay">
              {% include "misago/thread/breadcrumbs.html" %}
              <h1>{{ thread.title }}</h1>
            </div>
          </div>
        </div>
        <div class="page-header-details page-header-thread-details">
          <div class="flex-row">
            <div class="flex-row-section flex-row-section-auto">
              <div class="flex-row-col flex-row-col-shrink">
                <div class="thread-user-card">
                  <div class="thread-user-card-media">
                    {% if thread.starter_id %}
                      <a href="{% url 'misago:user' slug=thread.starter_slug pk=thread.starter_id %}">
                        <img alt="" class="user-avatar" src="{{ thread.starter|avatar:100 }}" width="40" height="40" />
                      </a>
                    {% else %}
                      <img alt="" class="user-avatar" src="{{ BLANK_AVATAR_URL }}" width="40" height="40" />
                    {% endif %}
                  </div>
                  <div class="thread-user-card-body">
                    <div class="thread-user-card-header">
                      {% if thread.starter_id %}
                        <a class="item-title" href="{% url 'misago:user' slug=thread.starter_slug pk=thread.starter_id %}">{{ thread.starter_name }}</a>
                      {% else %}
                        <span class="item-title">{{ thread.starter_name }}</span>
                      {% endif %}
                    </div>
                    <div>
                      <span class="text-muted" title="{% blocktrans trimmed with timestamp=thread.started_on|date:'DATETIME_FORMAT' context 'thread page header' %}
                        Started on: {{ timestamp }}
                      {% endblocktrans %}">
                        {{ thread.started_on|date:'DATE_FORMAT' }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-row-col"></div>
              {% if thread.replies > 0 %}
                <div class="flex-row-col flex-row-col-shrink">
                  {% include "misago/thread_replies.html" %}
                </div>
              {% endif %}
              {% if thread.is_closed or thread.is_hidden or thread.is_unapproved or thread.weight > 0 or thread.best_answer or thread.has_poll %}
                <div class="flex-row-col flex-row-col-shrink">
                  {% include "misago/thread_flags.html" %}
                </div>
              {% endif %}
            </div>
            {% if user.is_authenticated %}
              <div class="flex-row-section">
                <div class="flex-row-col">
                  <div class="dropdown">
                    <button class="btn btn-default btn-outline btn-block" type="button" disabled>
                      {% include "misago/thread/notifications.html" %}
                    </button>
                  </div>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>