100 lines
4.8 KiB
HTML
100 lines
4.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ topic.title }} - Forum{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Topic Header -->
|
|
<section class="bg-gradient-to-br from-gray-800 to-gray-900 text-white py-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center text-sm text-gray-400 mb-4">
|
|
<a href="{{ url_for('forum_index') }}" class="hover:text-white">Forum</a>
|
|
<span class="mx-2">/</span>
|
|
<a href="{{ url_for('forum_category', slug=topic.category.slug) }}" class="hover:text-white">{{ topic.category.name }}</a>
|
|
</div>
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold mb-2">
|
|
{% if topic.is_pinned %}
|
|
<svg class="w-5 h-5 inline mr-2 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M5 5a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H7a2 2 0 01-2-2V5z"/>
|
|
<path d="M8 12a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
|
|
<path fill-rule="evenodd" d="M10 18a1 1 0 01-1-1v-4a1 1 0 112 0v4a1 1 0 01-1 1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% endif %}
|
|
{{ topic.title }}
|
|
{% if topic.is_locked %}
|
|
<svg class="w-5 h-5 inline ml-2 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% endif %}
|
|
</h1>
|
|
<div class="text-gray-400 text-sm">
|
|
Started by {{ topic.author.username }} · {{ topic.created_at.strftime('%B %d, %Y at %H:%M') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Original Post -->
|
|
<section class="py-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="card mb-6">
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 font-semibold flex-shrink-0">
|
|
{{ topic.author.username[0].upper() }}
|
|
</div>
|
|
<div class="ml-4 flex-grow">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="font-medium text-gray-900">{{ topic.author.username }}</div>
|
|
<div class="text-sm text-gray-500">{{ topic.created_at.strftime('%B %d, %Y at %H:%M') }}</div>
|
|
</div>
|
|
<div class="prose prose-sm max-w-none text-gray-600">
|
|
{{ topic.content | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Replies -->
|
|
<div id="replies-list">
|
|
{% if replies %}
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">{{ replies|length }} Replies</h2>
|
|
{% for reply in replies %}
|
|
<div class="card mb-4">
|
|
<div class="flex items-start">
|
|
<div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 font-semibold flex-shrink-0">
|
|
{{ reply.author.username[0].upper() }}
|
|
</div>
|
|
<div class="ml-4 flex-grow">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="font-medium text-gray-900">{{ reply.author.username }}</div>
|
|
<div class="text-sm text-gray-500">{{ reply.created_at.strftime('%B %d, %Y at %H:%M') }}</div>
|
|
</div>
|
|
<div class="prose prose-sm max-w-none text-gray-600">
|
|
{{ reply.content | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Reply Form -->
|
|
{% if not topic.is_locked %}
|
|
<div id="reply-form-container" class="mt-8">
|
|
{% include "forum/partials/reply_form.html" %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card text-center py-8 text-gray-500">
|
|
<svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
<p>This topic is locked. No new replies can be added.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|