310 lines
24 KiB
Twig
310 lines
24 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}پرسش و پاسخ - حسابیکس{% endblock %}
|
|
|
|
{% block body %}
|
|
<main class="min-h-screen bg-gray-50">
|
|
<!-- هدر Q&A -->
|
|
<div class="bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700">
|
|
<div class="container mx-auto px-4 py-12">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="text-white mb-6 lg:mb-0">
|
|
<h1 class="text-4xl lg:text-5xl font-bold mb-4 animate-fade-in-up">
|
|
پرسش و پاسخ
|
|
</h1>
|
|
<p class="text-lg text-blue-100 animate-fade-in-up" style="animation-delay: 0.2s;">
|
|
سوالات خود را بپرسید و از تجربه دیگران استفاده کنید
|
|
</p>
|
|
</div>
|
|
<div class="animate-fade-in-up" style="animation-delay: 0.4s;">
|
|
{% if app.user and 'ROLE_CUSTOMER' in app.user.roles %}
|
|
<a href="{{ path('qa_ask') }}"
|
|
class="inline-flex items-center space-x-2 space-x-reverse px-6 py-3 bg-white text-blue-600 rounded-xl hover:bg-blue-50 transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-1">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
<span>سوال جدید</span>
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ path('customer_login') }}"
|
|
class="inline-flex items-center space-x-2 space-x-reverse px-6 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-1">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
<polyline points="10,17 15,12 10,7"></polyline>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
</svg>
|
|
<span>ورود برای پرسیدن سوال</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- محتوای اصلی -->
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<!-- محتوای اصلی -->
|
|
<div class="lg:col-span-3">
|
|
|
|
<!-- فیلترها و جستجو -->
|
|
<div class="bg-white rounded-2xl shadow-soft p-6 mb-8">
|
|
<form method="GET" class="space-y-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label for="filter" class="block text-sm font-medium text-gray-700 mb-2">فیلتر:</label>
|
|
<select name="filter" id="filter"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
|
|
<option value="all" {{ currentFilter == 'all' ? 'selected' : '' }}>همه سوالات</option>
|
|
<option value="unsolved" {{ currentFilter == 'unsolved' ? 'selected' : '' }}>سوالات حل نشده</option>
|
|
<option value="solved" {{ currentFilter == 'solved' ? 'selected' : '' }}>سوالات حل شده</option>
|
|
<option value="popular" {{ currentFilter == 'popular' ? 'selected' : '' }}>محبوبترین</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="search" class="block text-sm font-medium text-gray-700 mb-2">جستجو:</label>
|
|
<input type="text" name="search" id="search"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
|
value="{{ currentSearch }}" placeholder="جستجو در سوالات...">
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button type="submit"
|
|
class="w-full px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
|
|
<div class="flex items-center justify-center space-x-2 space-x-reverse">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
<span>جستجو</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- لیست سوالات -->
|
|
{% if questions is empty %}
|
|
<div class="bg-white rounded-2xl shadow-soft p-12 text-center">
|
|
<div class="max-w-md mx-auto">
|
|
<svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">سوالی یافت نشد</h3>
|
|
<p class="text-gray-600 mb-6">هنوز سوالی در این دستهبندی وجود ندارد.</p>
|
|
{% if app.user and 'ROLE_CUSTOMER' in app.user.roles %}
|
|
<a href="{{ path('qa_ask') }}"
|
|
class="inline-flex items-center space-x-2 space-x-reverse px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
<span>اولین سوال را بپرسید</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="space-y-6">
|
|
{% for question in questions %}
|
|
<div class="bg-white rounded-2xl shadow-soft hover:shadow-medium transition-all duration-300 overflow-hidden hover-lift group">
|
|
<div class="p-6">
|
|
<div class="flex space-x-4 space-x-reverse">
|
|
<!-- آمار سوال -->
|
|
<div class="flex flex-col items-center space-y-2 min-w-0">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold {{ question.votes > 0 ? 'text-green-600' : (question.votes < 0 ? 'text-red-600' : 'text-gray-500') }}">
|
|
{{ question.votes }}
|
|
</div>
|
|
<div class="text-xs text-gray-500">رای</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-lg font-semibold {{ question.answers|length > 0 ? 'text-green-600' : 'text-gray-500' }}">
|
|
{{ question.answers|length }}
|
|
</div>
|
|
<div class="text-xs text-gray-500">پاسخ</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- محتوای سوال -->
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<h3 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors duration-200">
|
|
<a href="{{ path('qa_question_show', {'id': question.id}) }}"
|
|
class="hover:underline">
|
|
{{ question.title }}
|
|
</a>
|
|
</h3>
|
|
{% if question.isSolved %}
|
|
<span class="inline-flex items-center space-x-1 space-x-reverse px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span>حل شده</span>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="text-gray-600 mb-4 line-clamp-3 leading-relaxed">
|
|
{% set content = question.content|markdown|raw %}
|
|
{% set plainText = content|striptags %}
|
|
{% if plainText|length > 200 %}
|
|
{{ plainText|slice(0, 200) }}...
|
|
{% else %}
|
|
{{ plainText }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
|
<!-- تگها -->
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for tagRelation in question.tagRelations %}
|
|
<a href="{{ path('qa_tag_questions', {'name': tagRelation.tag.name}) }}"
|
|
class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full hover:bg-blue-200 transition-colors duration-200">
|
|
{{ tagRelation.tag.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- اطلاعات سوال -->
|
|
<div class="flex items-center space-x-4 space-x-reverse text-sm text-gray-500">
|
|
<div class="flex items-center space-x-1 space-x-reverse">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
<span>{{ question.author.name }}</span>
|
|
</div>
|
|
<div class="flex items-center space-x-1 space-x-reverse">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span>{{ question.createdAt|date('U')|jdate('Y/m/d H:i') }}</span>
|
|
</div>
|
|
<div class="flex items-center space-x-1 space-x-reverse">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
<span>{{ question.views }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- صفحهبندی -->
|
|
{% if totalPages > 1 %}
|
|
<div class="mt-8">
|
|
<nav class="flex justify-center" aria-label="صفحهبندی سوالات">
|
|
<div class="flex items-center space-x-2 space-x-reverse">
|
|
<!-- دکمه صفحه قبل -->
|
|
{% if currentPage > 1 %}
|
|
<a href="?page={{ currentPage - 1 }}{{ currentFilter != 'all' ? '&filter=' ~ currentFilter : '' }}{{ currentSearch ? '&search=' ~ currentSearch : '' }}{{ currentTag ? '&tag=' ~ currentTag : '' }}"
|
|
class="flex items-center space-x-2 space-x-reverse px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-all duration-200">
|
|
<svg class="w-4 h-4" 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"></path>
|
|
</svg>
|
|
<span>قبلی</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<!-- شماره صفحات -->
|
|
<div class="flex items-center space-x-1 space-x-reverse">
|
|
{% for page in 1..totalPages %}
|
|
{% if page == currentPage %}
|
|
<span class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-lg">
|
|
{{ page }}
|
|
</span>
|
|
{% elseif page <= currentPage + 2 and page >= currentPage - 2 %}
|
|
<a href="?page={{ page }}{{ currentFilter != 'all' ? '&filter=' ~ currentFilter : '' }}{{ currentSearch ? '&search=' ~ currentSearch : '' }}{{ currentTag ? '&tag=' ~ currentTag : '' }}"
|
|
class="px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-all duration-200">
|
|
{{ page }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- دکمه صفحه بعد -->
|
|
{% if currentPage < totalPages %}
|
|
<a href="?page={{ currentPage + 1 }}{{ currentFilter != 'all' ? '&filter=' ~ currentFilter : '' }}{{ currentSearch ? '&search=' ~ currentSearch : '' }}{{ currentTag ? '&tag=' ~ currentTag : '' }}"
|
|
class="flex items-center space-x-2 space-x-reverse px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 transition-all duration-200">
|
|
<span>بعدی</span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- سایدبار -->
|
|
<div class="lg:col-span-1">
|
|
<div class="space-y-6">
|
|
<!-- تگهای محبوب -->
|
|
<div class="bg-white rounded-2xl shadow-soft p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 text-blue-600 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
|
|
</svg>
|
|
تگهای محبوب
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for tag in popularTags %}
|
|
<a href="{{ path('qa_tag_questions', {'name': tag.name}) }}"
|
|
class="inline-flex items-center px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full hover:bg-blue-200 transition-colors duration-200">
|
|
{{ tag.name }}
|
|
<span class="text-blue-600 mr-1">({{ tag.usageCount }})</span>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="mt-4">
|
|
<a href="{{ path('qa_tags') }}"
|
|
class="inline-flex items-center space-x-2 space-x-reverse text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">
|
|
<span>مشاهده همه تگها</span>
|
|
<svg class="w-4 h-4" 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"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- آمار -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 text-blue-600 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>
|
|
آمار
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-4 text-center">
|
|
<div>
|
|
<div class="text-2xl font-bold text-blue-600">{{ questions|length }}</div>
|
|
<div class="text-sm text-gray-600">سوال</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-green-600">{{ popularTags|length }}</div>
|
|
<div class="text-sm text-gray-600">تگ</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock %}
|