{{ header }} 
<div class="ocmp-blog-info">
<div class="container">
  <ul class="breadcrumb hidden">
    {% for breadcrumb in breadcrumbs %} 
    <li><a href="{{ breadcrumb['href'] }}">{{ breadcrumb['text'] }}</a></li>
    {% endfor %} 
  </ul>
  <div class="row">{{ column_left }} 
    {% if (column_left and column_right) %} 
    {% set class = 'col-sm-6' %} 
    {% elseif (column_left or column_right) %} 
    {% set class = 'col-sm-9' %} 
    {% else %} 
    {% set class = 'col-sm-12' %} 
    {% endif %} 
    <div id="content" class="{{ class }}">{{ content_top }} 
        <div class="ocmp-blog-details">
          <div class="ocmp-blog-single">
			<div class="ocmp-ingle-wrap">
				<div class="full-wrap">
					<!-- START OCMP POST INFO -->
					<div class="blog-info">
						<div class="ocmp-post-media">
							<div class="ocmp-image">
								<img src="{{ image }}" class="ocmp-info-image" alt="{{ heading_title }}" title="{{ heading_title }}" />
							</div>
						</div>
						<div class="ocmp-blog-header">
							<h1 class="ocmp-blog-title">{{ heading_title }}</h1>
						</div>	
						
						<div class="date-post-wrap">
							<span class="posted_by">{{ text_posted_by }}<a href="{{ author_href }}">{{ author_name }}</a></span><span class="date">{{ text_date_by }}{{ date_publish }}</span>	
							<span class="leave-comment pull-right"><i class="fa fa-comment"></i> &nbsp;{{ text_leave_comment }}</span>
						</div>
						
						<div class="meta-info">
							{% if (categories) %} 
								<div class="categories"><i class="fa fa-folder"></i> {{ text_categories }} 
									{% for category in categories %} 
										<a href="{{ category['href'] }}">{{ category['name'] }}, </a>
									{% endfor %} 
								</div>
							{% endif %}	
							{% if (tags) %} 
								<div class="tags"><i class="fa fa-bookmark"></i> {{ text_tags }} 
									{% set i = 0 %}{% for i in i..tags %} 
									{% if (i < (tags|length) - 1) %} 
									<a href="{{ tags[i]['href'] }}">{{ tags[i]['tag'] }}</a>,
									{% else %} 
									<a href="{{ tags[i]['href'] }}">{{ tags[i]['tag'] }}</a>
									{% endif %} 
									{% endfor %} 
								</div>
							 {% endif %} 
						</div>
							
						<div class="ocmp-post-content">
							{{ description }} 
						</div>
						<div class="ocmp-footer-info">

							<div class="social-share-info">
								<div class="social-component default_social_style_1 bdp_social_count_1227 bottom"></div>
							</div>
						</div>
					</div>
					<!-- END OCMP POST INFO -->
					
					{% if (blog_manager_sp_content_author) %} 
						<!-- START OCMP AUTHOR POST SECTION -->
						{% if (author_name) %} 
							<div class="author-info">
								<div class="ocmp-author-avtar col-sm-2">
									<a href="{{ author_href }}"><img src="{{ auth_image }}" class="avtar-rouded img-responsive" alt="{{ author_name }}" name="{{ author_name }}" ></a>
								</div>
								<div class="ocmp-author-content col-sm-10">
									<span class="author-name"><a href="{{ author_href }}">{{ author_name }}</a></span>
									<span class="about-author">{{ author_short_details ? author_short_details : author_details }}</span>
								</div>
							</div>
						{% endif %}	
						<!-- END OCMP AUTHOR POST SECTION -->
					{% endif %}	
					{% if (blog_manager_sp_content_related_blog) %} 
						<!-- START OCMP RELATED POST SECTION -->
						{% if (blogs) %} 
							<div class="blog-related related-blog-info">
								<div class="blog-related-heading">
									<h2>{{ entry_releted_post }}</h2>
								</div>	
								<div class="blog-reletd-content">
									{% for blog in blogs %} 
									<div class="blog-grid col-sm-4 col-xs-12 text-center">
										<div class="blog-rel-thumb">
											<a href="{{ blog['href'] }}"><img src="{{ blog['image'] }}" title="{{ blog['name'] }}" alt="{{ blog['name'] }}" class="img-responsive" /></a>
										</div>
										<h3 class="product-related-title">
											<a href="{{ blog['href'] }}">{{ blog['name'] }}</a>
										</h3>
									</div>
									{% endfor %} 
								</div>
							</div>	
						{% endif %} 
						<!-- END OCMP RELATED POST SECTION -->	
					{% endif %}	
					{% if (comment_status) %} 
						<!-- START OCMP COMMENT SECTION -->
						<div id="comments" class="comment-box">
							<h2 class="comment-title">{{ entry_comment }}</h2>
							<h2 class="comment-title-reply">{{ entry_reply_comment }}</h2>
							<div class="blog-comments blog-comment-content">
								{% if (comment_guest_status) %} 
								<div class="comments" id="tab-comment">
								  <form class="form-horizontal-comment" id="form-comment">
									<div id="comment"></div>
									{% if (comment_guest) %} 
										<div id="comment-form">
											<div class="hidden reply-box">
												<div class="col-sm-12 padding-left">
													<label class="control-label" for="input-name">{{ text_reply }}</label>
													<div class="input-group">
														<div class="input-group-addon text-center name"></div>
														<span class="input-group-btn"><a class="btn btn-danger btn-remove"><i class="fa fa-close fa-times"></i></a></span>
													</div>
												</div>	
											</div>
											<div class="form-group required col-sm-6 col-xs-12 padding-left">
												<label class="control-label" for="input-name">{{ entry_name }}</label>
												<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
											</div>
											<div class="form-group required col-sm-6  col-xs-12 padding-right">
												<label class="control-label" for="input-email">{{ entry_email }}</label>
												<input type="text" name="email" value="{{ customer_email }}" id="input-email" class="form-control" />
											</div>
											<div class="form-group">
												<label class="control-label" for="input-website">{{ entry_website }}</label>
												<input type="text" name="website" rows="5" id="input-website" class="form-control" />
											</div>
											<div class="form-group required">
												<label class="control-label" for="input-comment">{{ entry_comment }}</label>
												<textarea name="text" rows="5" id="input-comment" class="form-control"></textarea>
												<div class="help-block">{{ text_note }}</div>
											</div>
											<input type="hidden" name="blog_id" value="{{ blog_id }}" />
											<input type="hidden" name="reply_comment_id" value="" />
											<div class="buttons clearfix">
											  <div class="pull-right-0">
												<button type="button" id="button-comment" data-loading-text="{{ text_loading }}" class="ocmp-btn-default">{{ button_continue }}</button>
											  </div>
											</div>
										</div>
									{% else %} 
									{{ text_login }} 
									{% endif %} 
								  </form>
								</div>
								{% endif %} 
							</div>
						</div>
						<!-- END OCMP COMMENT SECTION -->
					{% endif %} 
				</div>
			</div>
		  </div>
        </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
<script type="text/javascript"><!-- 

$(".comment-title-reply").hide();

$('#comment').delegate('.pagination a', 'click', function(e) {
    e.preventDefault();

    $('#comment').fadeOut('slow');

    $('#comment').load(this.href);

    $('#comment').fadeIn('slow');
});

$('#comment').load('index.php?route=blog/blog/comment&blog_id={{ blog_id }}');

$(document).delegate('.reply', 'click' , function(e){
	 e.preventDefault();
		 
	var reply_comment_id = $(this).attr('data-reply-id');
	$('input[name=\'reply_comment_id\']').val(reply_comment_id);
	var reply_autoher_name = $(this).attr('data-reply-name');
	$('#comment-form .name').html(reply_autoher_name);
	$('#comment-form .reply-box').removeClass('hidden');
	$(".comment-title").hide();
	$(".comment-title-reply").show();
	$('html, body').animate({
        scrollTop: $("#comment-form").offset().top
    }, 500);
});

$('.btn-remove').on('click' , function(e){
	 e.preventDefault();
	$('input[name=\'reply_comment_id\']').val('');
	$('#comment-form .reply-box').addClass('hidden');
	$(".comment-title").show();
	$(".comment-title-reply").hide();
});


$('#button-comment').on('click', function() {
	$.ajax({
		url: 'index.php?route=blog/blog/write&blog_id={{ blog_id }}',
		type: 'post',
		dataType: 'json',
		data: $("#form-comment").serialize(),
		beforeSend: function() {
			$('#button-comment').button('loading');
		},
		complete: function() {
			$('#button-comment').button('reset');
		},
		success: function(json) {
			$('.alert-success, .alert-danger').remove();

			if (json['error']) {
				$('#comment-form').after('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
			}

			if (json['success']) {
				$('#comment-form').after('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '</div>');

				$('input[name=\'name\']').val('');
				$('input[name=\'email\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'website\']').val('');
			}
		}
	});
});
//--></script>		
<style type="text/css">
.ocmp-blog-single .blog-info .ocmp-blog-title, 
.ocmp-blog-single .blog-info .ocmp-blog-content,
.ocmp-blog-single .blog-info .ocmp-blog-content p{
	{% if (blog_manager_sp_title_background_color) %} 
		background:  {{ blog_manager_sp_title_background_color }};
	{% endif %}	
	{% if (blog_manager_sp_title_color) %} 
	color:  {{ blog_manager_sp_title_color }};
	{% endif %}		
}
.ocmp-blog-single .author-info .author-name, 
.ocmp-blog-single .author-info .author-name a,
.ocmp-blog-single .blog-info .ocmp-footer-info a,
.ocmp-blog-single .blog-related .product-related-title a,
.blog-group a
{
	{% if (blog_manager_alternative_link_color) %} 
	color:  {{ blog_manager_alternative_link_color }};
	{% endif %}	
}
.ocmp-blog-single .author-info .author-name a:hover,
.ocmp-blog-single .blog-info .ocmp-footer-info a:hover,
.ocmp-blog-single .blog-related .product-related-title a:hover,
.blog-group a:hover{
	{% if (blog_manager_alternative_hover_color) %} 
	color:  {{ blog_manager_alternative_hover_color }};
	{% endif %}	
}

</style>
</div>
{{ footer }}