{{ header }}
<div id="content-blogs" class="container">
	<ul class="breadcrumb">
		{% 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 }}	
		<h2 class="page_title">{{ heading_title }}</h2>		
			<div class="">
				{# Artcile wrapper #}
				<div class="article-container">
						<div class="image">
						{% if image %}
				            <ul class="thumbnails">				            
				              <li ><div class="thumbnail"><img src="{{ image }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></div></li>
				          	</ul>
				        {% endif %}
				        </div>
				        <div class="caption-blog singblog-description">	
							<h3 class="article-page-title">{{ heading_title }}</h3>
							{% if blog_date %}
							    <i class="fa fa-calendar-o"></i>
								<span class="block-date">
									<span class="day">{{ blog_date }}</span>
								</span>	
							{% endif %}
							<div class="blog-text"><span>{{ description }}</span></div>
						</div>
					{# Article Tag #}
					{% if tags %}
						<p class="blog-comment">{{ text_tags }}
							{% set count_tag = 0 %}
							{% for tag in tags %}
									{% if count_tag < tags | length -1 %}
										<span>{{ tag.name }}</span>, 
										{% else %}
											<span>{{ tag.name }}</span>
									{% endif %}
								{% set count_tag = count_tag+1 %}
							{% endfor %}
						</p>
					{% endif %}
					{% if visitor_comment %}
					<div class="blog-comments mt-30">
						<h3 class="leave-hedding">{{ text_on_comment }}</h3>
						<div class="comment_cust">				           
				            <div class="commentlist">
				                <ul>
				            		{% for comment in visitor_comment %}
				            		<li class="comment-item clearfix">
				                      	<div class="comment-text">
					                        <div class="user_img"><i class="fa fa-user"></i></div>
					                        <div class="comment-desc">
					                          	<div class="name">{{comment.author}}</div>
					                          	<div class="date">{{comment.date_added}}</div>
					                          	<div class="comment-dis">{{comment.comment_text}}</div>
					                        </div>
				                      	</div>
				                    </li>
				                	{% endfor %}
					            </ul>
				            </div>
				        </div>
				    </div>
		            {% endif %}
					{# Visitor Comment #}
					<div class="article-blog mt-30">
						<h3 class="leave-hedding">{{ text_leave_comment }}</h3>
						<div id="post_comment" class="post-comment">							
							<form  id="commnt_form" class="form-horizontal" method="post" onsubmit="saveComment();return false">
								<div class="form-group required">
									<label class="col-sm-3 control-label">{{ entry_author }}</label>
									<div class="col-sm-9">
										<input type="text" name="author"  placeholder="{{ entry_author }}" class="form-control" required/>
									</div>
								</div>
								<div class="form-group required">
									<label class="col-sm-3 control-label">{{ entry_email }}</label>
									<div class="col-sm-9">
										<input type="email" name="email" placeholder="{{ entry_email }}" class="form-control" required/>
									</div>
								</div>
								<div class="form-group required">
									<label class="col-sm-3 control-label">{{ entry_comment }}</label>
									<div class="col-sm-9">
										<textarea name="comment_text" placeholder="{{ entry_comment }}"  class="form-control" rows="6" maxlength="250" minlength="25" required></textarea>	
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-3 control-label"></div>
									<div class="col-sm-9 text-left">
										<button type="submit" class="btn btn-group-sm btn-default" name="button" >{{ text_leave_comment }}</button>
									</div>
								</div>
							</form>
						</div>
					</div>
					{# commnent form #}	
					{# Artcile wrapper #}	
				</div>				
			</div>
		</div>
		{{ column_right }}
	</div>
	{{ content_bottom }}
</div>
<script><!--
function saveComment(){
	const article_id = {{ article_id }};	
	var data= $("#commnt_form").serialize();
	data = data + ('&article_id=' + article_id);
	$.ajax({
		url: 'index.php?route=blog/article/write',
		type: 'post',
		data:data,
		dataType: 'json',
		success: function(json) {
			$('.alert-dismissible').remove();
			if (json['error']) {
			$('#commnt_form').before('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '<button type="button" class="close" data-dismiss="alert" >×</button></div>');
			}
			if (json['success']) {
				$('#commnt_form').before('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');

				$('input[name=\'author\']').val('');
				$('textarea[name=\'comment_text\']').val('');
				$('input[name=\'email\']').val('');
			}
		},
		error: function (error) {
			console.log(error);
		}
	});
}

//--></script>
{{ footer }}
