{% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import user_profile_link %}
{% from 'forum/macros.jinja' import display_message, display_breadcrumb, display_search_bar %}
{% from 'core/macros.jinja' import paginate_jinja %}

{% block title %}
  {{ topic }}
{% endblock %}


{% block additional_css %}
  <link rel="stylesheet" href="{{ static('forum/css/forum.scss') }}">
{% endblock %}

{% block content %}
  {{ display_breadcrumb(topic.forum, topic) }}
  <h3>{{ topic.title }}</h3>
  <div id="forum">
    <p>{{ topic.description }}</p>
    <p>
      <a class="ib button" href="{{ url('forum:new_message', topic_id=topic.id) }}">{% trans %}Reply{% endtrans %}</a>
      {% if user in topic.subscribed_users.all() %}
        <a class="ib button" href="{{ url('forum:toggle_subscribe_topic', topic_id=topic.id) }}">{% trans %}Unmark as favorite{% endtrans %}</a>
      {% else %}
        <a class="ib button" href="{{ url('forum:toggle_subscribe_topic', topic_id=topic.id) }}">{% trans %}Mark as favorite{% endtrans %}</a>
      {% endif %}
    </p>

    {{ display_search_bar(request) }}
    {{ paginate_jinja(msgs, msgs.paginator) }}

    <main class="message-list">
      {% for m in msgs %}
        {% if m.id == first_unread_message_id %}
          <span id="first_unread"></span>
        {% endif %}
        {% if m.id >= first_unread_message_id %}
          {{ display_message(m, user, True) }}
        {% else %}
          {{ display_message(m, user, False) }}
        {% endif %}
      {% endfor %}
    </main>

    <p><a class="ib button" href="{{ url('forum:new_message', topic_id=topic.id) }}">{% trans %}Reply{% endtrans %}</a></p>

    {{ paginate_jinja(msgs, msgs.paginator) }}
  </div>
{% endblock %}