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

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

{% block body %}
	<style>
		.blog-post {
			transition: all 0.3s ease;
		}
		.blog-post:hover {
			transform: translateY(-5px);
		}
		.post-image {
			border-radius: 15px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease;
		}
		.post-image:hover {
			transform: scale(1.02);
		}
		.post-card {
			border: none;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			border-radius: 15px;
		}
		.post-card:hover {
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}
		.recent-posts .card {
			border: none;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			border-radius: 15px;
			overflow: hidden;
		}
		.recent-posts .card:hover {
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}
		.recent-posts .card img {
			transition: transform 0.3s ease;
		}
		.recent-posts .card:hover img {
			transform: scale(1.1);
		}
		.post-title {
			font-size: 1.5rem;
			font-weight: 600;
			line-height: 1.4;
			margin-bottom: 1.5rem;
			font-family: inherit;
		}
		.post-intro {
			font-size: 1.1rem;
			line-height: 1.8;
			color: #555;
		}
		.post-meta {
			font-size: 0.9rem;
			color: #666;
		}
		.post-content {
			font-size: 1.1rem;
			line-height: 1.8;
		}
	</style>

	{% if item.plain is not null %}
		{{ item.plain | raw}}
	{% endif %}
	{% if item.body is not null %}
		<div class="container mt-4">
			<div class="row">
				<div class="col-sm-12 col-md-8">
					<article class="blog-post mb-4">
						<img class="img-fluid post-image mb-4" src="{{asset('uploaded/'~ item.mainPic)}}" alt="{{item.title}}"/>
						<h1 class="text-primary fs-5">{{item.title}}</h1>
						<div class="card post-card bg-body-tertiary mb-4">
							<div class="card-body">
								<div class="post-intro card-text mb-3">
									{{item.intro}}
								</div>
								<div class="post-meta card-text">
									<figure>
										<blockquote class="blockquote"></blockquote>
										<figcaption class="blockquote-footer">
											توسط
											<strong>{{item.submitter.name}}</strong>
											<cite title="Source Title">
												در تاریخ
												{{Jdate.jdate('Y/n/d',item.dateSubmit)}}
											</cite>
										</figcaption>
									</figure>
								</div>
							</div>
						</div>
						<div class="post-content mt-4">
							{{ item.body | raw }}
						</div>
					</article>
				</div>
				<div class="col-sm-12 col-md-4">
					<div class="recent-posts">
						<h3 class="text-primary mb-3">جدیدترین‌ها</h3>
						{% for post in posts %}
							<div class="card mb-3">
								<img src="{{asset('uploaded/'~ post.mainPic)}}" class="card-img-top" alt="{{post.title}}">
								<div class="card-body">
									<a href="{{path('app_blog_post',{'url':post.url})}}" class="stretched-link text-decoration-none">
										<h5 class="card-title text-primary">{{post.title}}</h5>
									</a>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
{% endblock %}