{% extends app.request.get('project_setting').instance_theme_path~':'~ app.request.get('project_setting').instance_theme ~':themeBase.html.twig' %}
{% block bread_crumb_after_home %}
	<li> Blog <i class="fa fa-angle-right fa-fw"> </i> </li>
	<li> <strong>{{ entity.postName }}</strong></li>
{% endblock bread_crumb_after_home %}

{% block seo_meta_title %}
	{{entity.metaTitle}}
{% endblock seo_meta_title %}

{% block seo_meta_description %}
	{{entity.metaDesc}}
{% endblock seo_meta_description %}

{% block main_content %}
<div class="container main">
	<div class="content-info-page about-us">
		<div class="innerpage">
			{% use 'OfficeBrainCustomBundleThemeBundle:IdmeTheme:BaseUIElements/breadCrumb.html.twig' %}
			{% block bread_crumb %} {{ parent() }} {% endblock bread_crumb %}
			
			<div class="blog-wrapper">
				<div class="row">
					{% block blog_detail_block %}
						<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
							<div class="blog-col blog-detail">
								<p><image src="{{asset('uploads/'~entity.featureImage)}}" alt="{{entity.featureImage}}" /></p>
								<p style="text-align:right;"><span><strong>Published At: </strong>{{ entity.publishedDate|date('m/d/Y H:i:s') }}</span></p>
								<div class="catr-title">
									<h1 class="item-title product-cat-title">{{ entity.postName }}</h1>
								</div>	
								
								<p class="blog-content">{{ entity.postContent|raw }}</p>
								{% if (category is defined and category|length > 0) %}
									<div class="tags-part"><b>Catagory</b> : 
										{% set catCounter = 0 %}
										{% set no_of_cat = category|length %}
										{% for key,value in category %}
											<a rel="category tag" href="{{ path('siteblog', {'catslug':key}) }}">{{value}}</a>
											{% set catCounter = catCounter + 1 %}
											{% if(catCounter < no_of_cat) %},{% endif %}
										{% endfor %}
									</div>
								{% endif %}
								{% if (tag is defined  and tag|length > 0) %}
									<div class="tags-part"><b>Tags</b> : 
										{% set tagCounter = 0 %}
										{% set no_of_tag = tag|length %}
										{% for key,value in tag %}
											<a rel="tag" href="{{ path('siteblog', {'tagslug':key}) }}">{{value}}</a>
											{% set tagCounter = tagCounter + 1 %}
											{% if(tagCounter < no_of_tag) %},{% endif %}
										{% endfor %}
									</div>
								{% endif %}
							</div>
							{#
							{% if previous.slug is defined %}<div class="row"><div class="col-lg-16 col-md-16 col-sm-16 col-xs-16 prev_next_link"><a class="back" href="{{ path('blog_show', {'slug': previous.slug }) }}"><span class="meta-nav">←</span>{{ previous.postName }}</a></div></div>{% endif %}
							{% if next.slug is defined %}<div class="row"><div class="col-lg-16 col-md-16 col-sm-16 col-xs-16 prev_next_link"><a class="back" href="{{ path('blog_show', {'slug': next.slug }) }}">{{ next.postName }}<span class="meta-nav">→</span></a></div></div>{% endif %} #}
						</div>
						<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
							<div class="blog-detail-left">
								<h3>Latest Blogs </h3>
								<ul class="latest_blogs">
									{{ render(controller('OfficeBrainBlogBundle:Blog:latestblog')) }}
								</ul>
							</div>

							<div class="blog-detail-left" style="margin-top:20px;">
								<h3>Blogs Categories</h3>
								<ul class="latest_blogs">
									{{ render(controller('OfficeBrainBlogBundle:Blog:activeblogCategoies')) }}
								</ul>
							</div>

							<div class="blog-detail-left" style="margin-top:20px;">
								<h3>Blogs Tags</h3>
								<ul class="latest_blogs">
									{{ render(controller('OfficeBrainBlogBundle:Blog:activeblogTags')) }}
								</ul>
							</div>
						</div>
						{# 
						{% if(commentList|length > 0) %}
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="blog-comments">
								<h2>{{commentList|length}} Comments</h2>
								<ol class="commentlist">
									{% for comment in commentList %}
									<li id="li-comment-{{ comment.id }}">
										<div class="comment-body" >
											<div class="comment-author"> 
												<img width="32" height="32" class="avatar" src="{{ asset( ob_project_assets_base_url ~ 'images/blog-img.png', null, true) }}" alt="">
												<cite class="fn">
													<a href="javascript:void(0);">{{ comment.commentName }}</a>
												</cite>
												<span class="says"></span><a href="javascript:void(0);" class="blog-date">{{ comment.commentCreatedDate|dateFormat(ob_project_date_format) }}</a>
											</div>
											<p>{{ comment.commentContent }}</p>
											<div class="rating"><div class="crfp-rating crfp-rating-{{ comment.commentRating }}">{{ comment.commentRating }}</div></div> 
										</div>
										{% if comment.commentParentId==0 %}
											{{ render(controller('OfficeBrainBlogBundle:Blog:showCommentReply', {'id':comment.id} )) }}
										{% endif %}
										<!-- <ul class="children">
											<li id="comment-2" class="comment odd alt depth-2">
												<div class="comment-body" id="div-comment-1">
													<div class="comment-author vcard"> 
														<img width="32" height="32" class="avatar" src="images/blog-img.png" alt=""> 
														<cite class="fn">
															<a href="javascript:void(0);">Jhon Martin</a>
														</cite> 
														<span class="says"></span><a href="javascript:void(0);" class="blog-date"> 26 June 2013, 15:20</a>
													</div>
													<p>
														Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an<br/> 
														unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
													</p>
												</div>
											</li>
										</ul> -->
									</li>
									{% endfor %}
								</ol>
							</div>
						</div>
						{% endif %}
						<div id="addcommentform" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							{{ form_start(form, {'attr': {'class': 'data-form','id':'add_comment_post','method':'post', novalidate:'novalidate'}}) }}
							{{ form_errors(form) }}
								<div class="blog-comments">
									<h2>Leave a reply</h2>
									<div class="row">
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
											<div class="form-group">
												{{ form_label(form.commentName, 'Name') }}<span class="red">*</span>
												{{ form_widget(form.commentName) }}
												{{ form_errors(form.commentName) }}
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
											<div class="form-group">
												{{ form_label(form.commentEmail, 'Email') }}<span class="red">*</span>
												{{ form_widget(form.commentEmail) }}
												{{ form_errors(form.commentEmail) }}
											</div>
										</div>
										<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
											<div class="form-group">
												{{ form_label(form.commentWebsite, 'Website') }}<span class="red">*</span>
												{{ form_widget(form.commentWebsite) }}
												{{ form_errors(form.commentWebsite) }}
											</div>
										</div>
										<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
											<div class="form-group">
												{{ form_label(form.commentContent, 'Comment') }} <span class="red">*</span>
												{{ form_widget(form.commentContent) }}
												{{ form_errors(form.commentContent) }}
											</div>
										</div>
										<!-- <div class="row margin_15"><div class="col-lg-5 col-md-5 col-sm-6 col-xs-16"><p>Rating</p></div>
											<div class="col-lg-11 col-md-11 col-sm-10 col-xs-16" id="rating_star"><p class="crfp-field">
													<input name="rating-star" type="radio" class="star" value="1" />
													<input name="rating-star" type="radio" class="star" value="2" />
													<input name="rating-star" type="radio" class="star" value="3" />
													<input name="rating-star" type="radio" class="star" value="4" />
													<input name="rating-star" type="radio" class="star" value="5" />
													<input type="hidden" name="crfp-rating" value="0" />
										</p></div></div> -->
										<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
											<div class="btn-box-main">
												<input type="button" class="btn btn-default" value="Post Comment" onclick="return postForm('add_comment_post')">
											</div>
										</div>
									</div>
								</div>
								{{ form_widget(form.commentPostId,{'value':entity.id}) }}
							{{ form_end(form) }}
						</div>
						#}
					{% endblock blog_detail_block %}
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock main_content %}
{% block footer_js %}
	{{ parent() }}
	<style>
	.catr-title h1 {
	    font-size: 18px;
	    font-weight: 600;
	    text-align: left;
	    border-bottom: 1px #ddd solid;
	    margin-bottom: 0;
	    line-height: normal;
	    color: #04517B;
	    text-transform: none;
	}
	.blog-detail p{
		font-size: 14px;
	    color: #000000;
	    line-height: 186%;
	}
	.blog-detail-left h3{
		border-bottom: 2px solid #000;
    	margin-bottom: 15px;
    	padding-bottom: 5px;
    	font-size: 20px;
	    color: #04517B;
	    text-transform: none;
	    font-weight: bold;
	}
	.latest_blogs{
		font-size: 15px;
	}
	.latest_blogs li{
		width:100%; 
		border-bottom: 1px dotted; 
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.latest_blogs li a{
		font-size: 14px;
    	color: #000000;
    	line-height: 186%;
	}

	.latest_blogs li:last-child{
		width:100%; 
		border-bottom: none; 
		padding-bottom: 10px;
	}
	.blog-detail ul li:first-child {
	    text-align: left;
	}
	.blog-detail ul li:last-child {
	    text-align: left;
	}
	.blog-detail ul li {
	    color: #7f7f7f;
	    font-size: 13px;
	    float: none;
	    width: 33%;
	    text-transform: none;
	    margin-left: 20px;
	    text-align: left;
	}
	.latest_blogs li img{
		object-fit: cover;
	}
	</style>
	<script>
	function postForm(form_id){
		$('#'+form_id + ' .field-error').html('').hide();
		var data = $('#'+form_id).serialize();
		$.ajax({
			type: 'POST',
			url: $('#'+form_id).attr('action'),
			data: data,
			cache: false,
			dataType: 'json',
			success: function(responce_data){
				if(responce_data.hasOwnProperty('form_errors')){
					var formName = $('#'+form_id).attr("name");
					$.each(responce_data.form_errors, function(field_name, error_message) {
						field_name = field_name.replace('.', '_');
						if($('#'+formName+ '_'+field_name).length){
							$('#'+formName+ '_'+field_name).after('<ul class="error-message"><li>'+error_message+'</li></ul>');
						}
					});
				}
				else if(responce_data.hasOwnProperty('js_function')){
					var js_function = responce_data.js_function +'';
					eval(js_function);
				}
				else if(responce_data.hasOwnProperty('error_message')) {
					showErrorMessage(responce_data.error_message);
				}
				$('#'+form_id + ' .btn-set').show();
				$('#'+form_id + ' .loading-box').hide();
				$('#'+form_id + ' .field-error').fadeIn('slow');
			}
		});
		return false;
	}
	</script>
{% endblock footer_js %}