{% extends 'base.html.twig' %}
{% block keywords %}
	{{ item.keywords }}
{% endblock %}
{% block title %}
	{{ item.title }}
{% endblock %}

{% block des %}
	{{ item.intro }}
{% endblock %}

{% block body %}
	{% if item.plain is not null %}
		{{ item.plain | raw}}
	{% endif %}
	{% if item.body is not null %}
		<main class="min-h-screen bg-gray-50">
			<!-- هدر پست -->
			<div class="bg-white border-b border-gray-200">
				<div class="container mx-auto px-4 py-8">
					<div class="max-w-4xl mx-auto">
						<!-- برچسب‌ها -->
						{% if item.tree|length > 0 %}
							<div class="flex flex-wrap gap-2 mb-4">
								{% for tree in item.tree %}
									<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">
										{{ tree.label }}
									</span>
								{% endfor %}
							</div>
						{% endif %}

						<!-- عنوان -->
						<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-6 leading-tight">
							{{item.title}}
						</h1>

						<!-- متا اطلاعات -->
						<div class="flex flex-wrap items-center gap-6 text-sm text-gray-600 mb-8">
							<div class="flex items-center space-x-2 space-x-reverse">
								<svg class="w-5 h-5" 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>توسط <strong class="text-gray-900">{{item.submitter.name}}</strong></span>
							</div>
							<div class="flex items-center space-x-2 space-x-reverse">
								<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
								</svg>
								<span>{{Jdate.jdate('Y/n/d',item.dateSubmit)}}</span>
							</div>
							<div class="flex items-center space-x-2 space-x-reverse">
								<svg class="w-5 h-5" 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>{{ item.views }} بازدید</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- محتوای اصلی -->
			<div class="container mx-auto px-4 py-12">
				<div class="max-w-6xl mx-auto">
					<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
						<!-- محتوای پست -->
						<div class="lg:col-span-2">
							<article class="prose prose-lg max-w-none">
								<!-- تصویر اصلی -->
								<div class="mb-8">
									<img src="{{asset('uploaded/'~ item.mainPic)}}" 
										 alt="{{item.title}}" 
										 class="w-full h-64 lg:h-80 object-cover rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300">
								</div>

								<!-- خلاصه پست -->
								{% if item.intro %}
									<div class="bg-blue-50 border-r-4 border-blue-500 p-6 rounded-lg mb-8">
										<p class="text-lg text-gray-700 leading-relaxed font-medium">
											{{item.intro}}
										</p>
									</div>
								{% endif %}

								<!-- محتوای پست -->
								<div class="prose prose-lg max-w-none text-gray-800 leading-relaxed">
									{{ item.body | raw }}
								</div>

								<!-- اشتراک‌گذاری -->
								<div class="mt-12 pt-8 border-t border-gray-200">
									<div class="flex items-center justify-between">
										<div>
											<h3 class="text-lg font-semibold text-gray-900 mb-4">این مطلب را به اشتراک بگذارید</h3>
											<div class="flex space-x-3 space-x-reverse">
												<a href="https://twitter.com/intent/tweet?text={{item.title|url_encode}}&url={{app.request.uri|url_encode}}" 
												   target="_blank" 
												   class="flex items-center space-x-2 space-x-reverse px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200">
													<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
														<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
													</svg>
													<span>توییتر</span>
												</a>
												<a href="https://www.linkedin.com/sharing/share-offsite/?url={{app.request.uri|url_encode}}" 
												   target="_blank" 
												   class="flex items-center space-x-2 space-x-reverse px-4 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-800 transition-colors duration-200">
													<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
														<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
													</svg>
													<span>لینکدین</span>
												</a>
												<a href="https://t.me/share/url?url={{app.request.uri|url_encode}}&text={{item.title|url_encode}}" 
												   target="_blank" 
												   class="flex items-center space-x-2 space-x-reverse px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors duration-200">
													<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
														<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
													</svg>
													<span>تلگرام</span>
												</a>
											</div>
										</div>
									</div>
								</div>
							</article>
						</div>

						<!-- سایدبار -->
						<div class="lg:col-span-1">
							<div class="sticky top-8">
								<!-- پست‌های مرتبط -->
								{% if posts|length > 0 %}
									<div class="bg-white rounded-2xl shadow-soft p-6 mb-8">
										<h3 class="text-xl font-bold text-gray-900 mb-6 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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
											</svg>
											جدیدترین‌ها
										</h3>
										<div class="space-y-4">
											{% for post in posts %}
												<a href="{{path('app_blog_post',{'url':post.url})}}" 
												   class="group block bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-colors duration-200">
													<div class="flex space-x-3 space-x-reverse">
														<img src="{{asset('uploaded/'~ post.mainPic)}}" 
															 alt="{{post.title}}" 
															 class="w-16 h-16 object-cover rounded-lg flex-shrink-0">
														<div class="flex-1 min-w-0">
															<h4 class="text-sm font-semibold text-gray-900 group-hover:text-blue-600 transition-colors duration-200 line-clamp-2">
																{{post.title}}
															</h4>
															<p class="text-xs text-gray-500 mt-1">
																{{ Jdate.jdate('Y/n/d',post.dateSubmit) }}
															</p>
														</div>
													</div>
												</a>
											{% endfor %}
										</div>
									</div>
								{% endif %}

								<!-- دکمه بازگشت به وبلاگ -->
								<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-6 text-center">
									<h3 class="text-lg font-semibold text-gray-900 mb-4">بازگشت به وبلاگ</h3>
									<p class="text-sm text-gray-600 mb-4">مطالب بیشتری را در وبلاگ ما بخوانید</p>
									<a href="{{path('app_blog_home')}}" 
									   class="inline-flex items-center space-x-2 space-x-reverse px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
										<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>
										<span>مشاهده همه مطالب</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>
	{% endif %}
{% endblock %}