{{ header }}
{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<button type="submit" form="form-blog-comment" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
					<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div class="container-fluid">
		{% if error_warning %}
			<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
				<button type="button" class="close" data-dismiss="alert">&times;</button>
			</div>
		{% endif %}
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
			</div>
			<div class="panel-body">
				<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-blog-comment" class="form-horizontal">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
						<li><a href="#tab-comment" data-toggle="tab">{{ tab_comment }}</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="tab-general">
							<div class="form-group required">
								<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">{{ entry_author }}</label>
								<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
									<input type="text" name="author_name" value="{{ author_name }}" class="form-control" />
									{% if error_author %}
										<span class="text-danger">{{ error_author }}</span>
									{% endif %}
								</div>
							</div>
							<div class="form-group required">
								<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"><span data-toggle="tooltip" title="{{ help_article }}">{{ entry_article }}</label>
								<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
									<input type="text" name="article_title" value="{{ article_title }}" class="form-control" />
									{% if error_article_title %}
										<span class="text-danger">{{ error_article_title }}</span>
									{% endif %}
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">{{ entry_status }}</label>
								<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
									<select name="status" class="form-control">
										<option value="1" {% if status == 1 %}{{ "selected='selected'" }}{% endif %}>{{ text_enabled }}</option>
										<option value="0" {% if status == 0 %}{{ "selected='selected'" }}{% endif %}>{{ text_disabled }}</option>
									</select>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab-comment">
							<div class="form-group required">
								<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">{{ entry_comment }}</label>
								<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
									<textarea name="comment" class="form-control">{{ comment }}</textarea>
									{% if error_comment %}
										<span class="text-danger">{{ error_comment }}</span>
									{% endif %}
								</div>
							</div>
							<table id="comment-reply" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<td class="text-left">{{ entry_author }}</td>
										<td class="text-left">{{ entry_reply_comment }}</td>
										<td class="text-left">{{ entry_status }}</td>
										<td></td>
									</tr>
								</thead>
								{% set
								module_row = 0
								%}
								{% for reply in comment_reply %}
									<tbody id="reply-{{ module_row }}">
										<tr>
											<td class="text-left">
												<input type="text" name="comment_reply[{{ module_row }}][author]" value="{{ reply.author }}" class="form-control" />
												{% if error_reply_author.module_row %}
													<span class="text-danger">{{ error_reply_author.module_row }}</span>
												{% endif %}
											</td>
											<td class="text-left">
												<textarea name="comment_reply[{{ module_row }}][comment]" class="form-control">{{ reply.comment }}</textarea>
												{% if error_reply_comment.module_row %}
													<span class="text-danger">{{ error_reply_comment.module_row }}</span>
												{% endif %}
											</td>
											<td class="left">
												<select name="comment_reply[{{ module_row }}][status]" class="form-control">
													<option value="1" {% if reply.status == 1 %}{{ "selected='selected'" }}{% endif %}>{{ text_enabled }}</option>
													<option value="0" {% if reply.status == 0 %}{{ "selected='selected'" }}{% endif %}>{{ text_disabled }}</option>
												</select>
											</td>
											<td class="text-left">
												<button type="button" onclick="$('#reply-{{ module_row }}').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button>
											</td>
										</tr>
									</tbody>
									{% set 
									module_row = module_row + 1
									%}
								{% endfor %}
								<tfoot>
									<tr>
										<td colspan="3"></td>
										<td class="text-left">
											<button type="button" onclick="addReply();" data-toggle="tooltip" title="{{ button_add_reply }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var module_row = {{ module_row }};

	function addReply() {

		html  = '<tbody id="reply-' + module_row + '">';
		html += '	<tr>';
		html += '		<td class="text-left">';
		html += '			<input type="text" name="comment_reply[' + module_row + '][author]" value="" class="form-control" />';
		html += '		</td>';
		html += '		<td class="text-left">';
		html += '			<textarea name="comment_reply[' + module_row + '][comment]" class="form-control"></textarea>';
		html += '		</td>';
		html += '		<td class="text-left">';
		html += '			<select name="comment_reply[' + module_row + '][status]" class="form-control">';
		html +='				<option value="1">{{ text_enabled }}</option>';
		html +='				<option value="0">{{ text_disabled }}</option>';
		html += '			</select>';
		html += '		</td>';
		html += '		<td class="text-left"><button type="button" onclick="$(\'#reply-' + module_row + '\').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
		html += '	</tr>';
		html += '</tbody>';

		$('#comment-reply tfoot').before(html);

		module_row++;
	}
</script>

<script type="text/javascript">
	$('input[name=\'article_title\']').autocomplete({
		'source': function(request, response) {
			$.ajax({
				url: 'index.php?route=simple_blog/article/autocomplete&user_token={{ user_token }}&article_name=' +  encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['simple_blog_article_id']
						}
					}));
				}
			});
		},
		'select': function(item) {
			$('input[name=\'article_title\']').val(item['label']);
		}
	});
</script>
{{ footer }}