|
{% extends "layout.html" %} |
|
|
|
{% block title %}{{ user.username }}'s Profile - Community Forum{% endblock %} |
|
|
|
{% block breadcrumb %} |
|
<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Home</a> |
|
<span class="mx-2">/</span> |
|
<span>Profile: {{ user.username }}</span> |
|
{% endblock %} |
|
|
|
{% block content %} |
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="lg:col-span-1"> |
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
<div class="px-6 py-4 border-b border-gray-200 bg-blue-50"> |
|
<h2 class="text-xl font-bold text-gray-800">User Profile</h2> |
|
</div> |
|
|
|
<div class="p-6"> |
|
<div class="flex flex-col items-center"> |
|
<img |
|
src="{{ url_for('static', filename='uploads/avatars/' + user.avatar) if user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" |
|
alt="{{ user.username }}" |
|
class="w-32 h-32 rounded-full object-cover border-4 border-white shadow" |
|
> |
|
|
|
<h1 class="mt-4 text-2xl font-bold text-gray-800">{{ user.username }}</h1> |
|
|
|
<div class="mt-2"> |
|
{% if user.role == 'admin' %} |
|
<span class="inline-block bg-red-100 text-red-800 text-sm px-3 py-1 rounded-full">Administrator</span> |
|
{% elif user.role == 'moderator' %} |
|
<span class="inline-block bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">Moderator</span> |
|
{% else %} |
|
<span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">Member</span> |
|
{% endif %} |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 space-y-4 text-gray-700"> |
|
<div class="flex items-center"> |
|
<i data-feather="calendar" class="w-5 h-5 text-gray-400 mr-3"></i> |
|
<span>Joined {{ user.created_at.strftime('%B %d, %Y') }}</span> |
|
</div> |
|
|
|
<div class="flex items-center"> |
|
<i data-feather="clock" class="w-5 h-5 text-gray-400 mr-3"></i> |
|
<span>Last seen {{ user.last_seen.strftime('%B %d, %Y') }}</span> |
|
</div> |
|
|
|
{% if user.location %} |
|
<div class="flex items-center"> |
|
<i data-feather="map-pin" class="w-5 h-5 text-gray-400 mr-3"></i> |
|
<span>{{ user.location }}</span> |
|
</div> |
|
{% endif %} |
|
|
|
{% if user.website %} |
|
<div class="flex items-center"> |
|
<i data-feather="globe" class="w-5 h-5 text-gray-400 mr-3"></i> |
|
<a href="{{ user.website }}" target="_blank" class="text-blue-600 hover:underline truncate">{{ user.website }}</a> |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
{% if user.bio %} |
|
<div class="mt-6 pt-6 border-t border-gray-200"> |
|
<h3 class="text-lg font-medium text-gray-800 mb-2">About</h3> |
|
<p class="text-gray-700">{{ user.bio }}</p> |
|
</div> |
|
{% endif %} |
|
|
|
{% if user.signature %} |
|
<div class="mt-6 pt-6 border-t border-gray-200"> |
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Signature</h3> |
|
<p class="text-gray-700 text-sm italic">{{ user.signature }}</p> |
|
</div> |
|
{% endif %} |
|
|
|
{% if current_user.is_authenticated and current_user.id == user.id %} |
|
<div class="mt-6 pt-6 border-t border-gray-200"> |
|
<a href="{{ url_for('user.edit_profile') }}" class="w-full block text-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"> |
|
Edit Profile |
|
</a> |
|
<a href="{{ url_for('user.change_password') }}" class="w-full block text-center mt-2 px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"> |
|
Change Password |
|
</a> |
|
</div> |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
<div class="px-6 py-4 border-b border-gray-200 bg-blue-50 flex justify-between items-center"> |
|
<h2 class="text-xl font-bold text-gray-800">Topics Started</h2> |
|
<span class="text-gray-600">{{ topics.total }} total</span> |
|
</div> |
|
|
|
{% if topics.items %} |
|
<div class="divide-y divide-gray-200"> |
|
{% for topic in topics.items %} |
|
<div class="p-4 hover:bg-gray-50"> |
|
<a href="{{ url_for('forum.topic_view', id=topic.id) }}" class="block"> |
|
<div class="flex justify-between items-start"> |
|
<div> |
|
<h3 class="text-lg font-medium text-gray-800 hover:text-blue-600">{{ topic.title }}</h3> |
|
<div class="flex items-center text-sm text-gray-500 mt-1"> |
|
<span>{{ topic.created_at.strftime('%b %d, %Y') }}</span> |
|
<span class="mx-2">•</span> |
|
<span>{{ topic.reply_count() }} replies</span> |
|
<span class="mx-2">•</span> |
|
<span>{{ topic.views }} views</span> |
|
</div> |
|
|
|
{% if topic.tags %} |
|
<div class="mt-2 flex flex-wrap"> |
|
{% for tag in topic.tags %} |
|
<a href="{{ url_for('forum.tag_view', tag_name=tag.name) }}" class="tag"> |
|
{{ tag.name }} |
|
</a> |
|
{% endfor %} |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
<div class="text-xs text-gray-500 whitespace-nowrap ml-4"> |
|
<div>In: <a href="{{ url_for('forum.category_view', id=topic.category_id) }}" class="text-blue-600 hover:underline">{{ topic.category.name }}</a></div> |
|
</div> |
|
</div> |
|
</a> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
|
|
|
|
{% if topics.pages > 1 %} |
|
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200"> |
|
<div class="flex justify-center"> |
|
<nav class="inline-flex rounded-md shadow"> |
|
{% if topics.has_prev %} |
|
<a href="{{ url_for('user.profile', username=user.username, page=topics.prev_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50"> |
|
Previous |
|
</a> |
|
{% else %} |
|
<span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-l-md cursor-not-allowed"> |
|
Previous |
|
</span> |
|
{% endif %} |
|
|
|
{% for page_num in topics.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %} |
|
{% if page_num %} |
|
{% if page_num == topics.page %} |
|
<span class="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-gray-300"> |
|
{{ page_num }} |
|
</span> |
|
{% else %} |
|
<a href="{{ url_for('user.profile', username=user.username, page=page_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50"> |
|
{{ page_num }} |
|
</a> |
|
{% endif %} |
|
{% else %} |
|
<span class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300"> |
|
… |
|
</span> |
|
{% endif %} |
|
{% endfor %} |
|
|
|
{% if topics.has_next %} |
|
<a href="{{ url_for('user.profile', username=user.username, page=topics.next_num) }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50"> |
|
Next |
|
</a> |
|
{% else %} |
|
<span class="px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-r-md cursor-not-allowed"> |
|
Next |
|
</span> |
|
{% endif %} |
|
</nav> |
|
</div> |
|
</div> |
|
{% endif %} |
|
|
|
{% else %} |
|
<div class="p-6 text-center text-gray-500"> |
|
This user hasn't created any topics yet. |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
<div class="px-6 py-4 border-b border-gray-200 bg-blue-50"> |
|
<h2 class="text-xl font-bold text-gray-800">Recent Posts</h2> |
|
</div> |
|
|
|
{% if recent_posts %} |
|
<div class="divide-y divide-gray-200"> |
|
{% for post in recent_posts %} |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div> |
|
<div class="flex justify-between items-start mb-2"> |
|
<div> |
|
<a href="{{ url_for('forum.topic_view', id=post.topic_id) }}" class="text-lg font-medium text-gray-800 hover:text-blue-600"> |
|
Re: {{ post.topic.title }} |
|
</a> |
|
</div> |
|
<div class="text-xs text-gray-500"> |
|
{{ post.created_at.strftime('%b %d, %Y %H:%M') }} |
|
</div> |
|
</div> |
|
|
|
<div class="text-gray-700 line-clamp-2 text-sm mb-2"> |
|
{{ post.content|striptags|truncate(150) }} |
|
</div> |
|
|
|
<div class="text-xs text-gray-500"> |
|
Posted in: <a href="{{ url_for('forum.category_view', id=post.topic.category_id) }}" class="text-blue-600 hover:underline">{{ post.topic.category.name }}</a> |
|
<a href="{{ url_for('forum.topic_view', id=post.topic_id) }}#post-{{ post.id }}" class="text-blue-600 hover:underline ml-2"> |
|
View Post <i data-feather="arrow-right" class="w-3 h-3 inline"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
|
|
{% if current_user.id == user.id %} |
|
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200"> |
|
<a href="{{ url_for('user.user_posts') }}" class="inline-flex items-center text-blue-600 hover:underline"> |
|
View all my posts |
|
<i data-feather="arrow-right" class="w-4 h-4 ml-1"></i> |
|
</a> |
|
</div> |
|
{% endif %} |
|
|
|
{% else %} |
|
<div class="p-6 text-center text-gray-500"> |
|
This user hasn't made any posts yet. |
|
</div> |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
{% endblock %} |
|
|
