99 lines
5.1 KiB
HTML
99 lines
5.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ topic.title }} - Forum{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Topic Header -->
|
|
<section class="relative py-16 overflow-hidden">
|
|
<div class="absolute inset-0 dot-grid opacity-25 pointer-events-none"></div>
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[250px] pointer-events-none"
|
|
style="background: radial-gradient(ellipse, rgba(92,184,44,0.08) 0%, transparent 70%); filter: blur(40px);"></div>
|
|
|
|
<div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Breadcrumb -->
|
|
<div class="flex items-center gap-2 text-sm mb-6" style="color: #6b6b8a;">
|
|
<a href="{{ url_for('forum_index') }}" class="hover:text-primary-400 transition-colors">Forum</a>
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
<a href="{{ url_for('forum_category', slug=topic.category.slug) }}" class="hover:text-primary-400 transition-colors">{{ topic.category.name }}</a>
|
|
</div>
|
|
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-3 flex-wrap">
|
|
{% if topic.is_pinned %}<span class="badge badge-primary">Pinned</span>{% endif %}
|
|
{% if topic.is_locked %}<span class="badge badge-red">Locked</span>{% endif %}
|
|
</div>
|
|
<h1 class="text-3xl md:text-4xl font-extrabold leading-tight mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
|
|
{{ topic.title }}
|
|
</h1>
|
|
<div class="text-sm" style="color: #6b6b8a;">
|
|
Started by <span style="color: #c4c2d4;">{{ topic.author.username }}</span>
|
|
· {{ topic.created_at.strftime('%B %d, %Y at %H:%M') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Posts & Replies -->
|
|
<section class="pb-24" style="background: #0a0a14;">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- Original post -->
|
|
<div class="card p-7 mb-4" style="border: 1px solid rgba(92,184,44,0.2);">
|
|
<div class="flex items-start gap-4">
|
|
<div class="avatar w-11 h-11 text-sm font-bold flex-shrink-0">{{ topic.author.username[0].upper() }}</div>
|
|
<div class="flex-grow min-w-0">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="font-semibold text-sm" style="color: #e8e6f0;">{{ topic.author.username }}</div>
|
|
<div class="text-xs" style="color: #6b6b8a;">{{ topic.created_at.strftime('%B %d, %Y at %H:%M') }}</div>
|
|
</div>
|
|
<div class="prose-dark text-sm leading-relaxed">{{ topic.content | safe }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Replies -->
|
|
<div id="replies-list">
|
|
{% if replies %}
|
|
<div class="text-xs font-semibold tracking-widest uppercase mt-10 mb-4" style="color: #6b6b8a; font-family: 'Syne', sans-serif;">
|
|
{{ replies|length }} {{ 'Reply' if replies|length == 1 else 'Replies' }}
|
|
</div>
|
|
{% for reply in replies %}
|
|
<div class="card p-6 mb-3" style="border: 1px solid rgba(255,255,255,0.05);">
|
|
<div class="flex items-start gap-4">
|
|
<div class="avatar w-9 h-9 text-xs font-bold flex-shrink-0">{{ reply.author.username[0].upper() }}</div>
|
|
<div class="flex-grow min-w-0">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="font-semibold text-sm" style="color: #e8e6f0;">{{ reply.author.username }}</div>
|
|
<div class="text-xs" style="color: #6b6b8a;">{{ reply.created_at.strftime('%B %d, %Y at %H:%M') }}</div>
|
|
</div>
|
|
<div class="prose-dark text-sm leading-relaxed">{{ reply.content | safe }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Reply form or locked message -->
|
|
{% if not topic.is_locked %}
|
|
<div id="reply-form-container" class="mt-10">
|
|
{% include "forum/partials/reply_form.html" %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card text-center py-10 mt-10" style="border: 1px solid rgba(239,68,68,0.2); background: rgba(239,68,68,0.05);">
|
|
<svg class="w-10 h-10 mx-auto mb-3 text-red-500 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 class="text-sm" style="color: #8b8ca8;">This topic is locked. No new replies can be added.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|