{% layout "layout-page-tabs" %}
{% block title %}Product Edit{% endblock %}

{% block tablist %}
<li class="active"><a data-toggle="tab" href="#details">Details</a></li>
<li><a data-toggle="tab" href="#meta">Meta</a></li>
<li><a data-toggle="tab" href="#images">Images</a></li>
<li><a data-toggle="tab" href="#reviews">Reviews</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{{ "plugins/bootstrap-datepicker/bootstrap-datepicker.js" | asset_url | script_tag }}      			<!-- Datepicker -->

<script>
	$('#datepicker-range').datepicker({todayHighlight: true});
</script>
{% endblock %}

{% block content %}

<div class="tab-content">
	<div class="tab-pane active" id="details">
		<div class="panel">
			<div class="panel-body">
				<div class="tab-pane active" id="details">
					<form action="" class="form-horizontal tabular-form">
						<div class="form-group">
							<label for="" class="control-label col-sm-2">Name</label>
							<div class="col-sm-8 tabular-border">
								<input type="text" class="form-control">
							</div>
						</div>
						<div class="form-group">
							<label for="" class="control-label col-sm-2">Description</label>
							<div class="col-sm-8 tabular-border">
								<textarea name="" id="" cols="30" rows="3" class="form-control"></textarea>
								<p class="help-block">Shown in product listing</p>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="control-label col-sm-2">Categories</label>
							<div class="col-sm-8 tabular-border">
								<select class="form-control" multiple="">
									<option>Lorem ipsum dolor.</option>
									<option>Amet, impedit aperiam?</option>
									<option>Nemo, alias, quasi?</option>
									<option>Inventore, expedita.</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="control-label col-sm-2">Available Date</label>
							<div class="col-sm-8 tabular-border">
								<div class="input-daterange input-group" id="datepicker-range">
									<input type="text" class="input-small form-control" name="start" />
									<span class="input-group-addon">to</span>
									<input type="text" class="input-small form-control" name="end" />
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="" class="control-label col-sm-2">Price</label>
							<div class="col-sm-8 tabular-border">
								<input type="text" class="form-control">
							</div>
						</div>
						<div class="form-group pb0">
							<label for="" class="control-label col-sm-2">Published Status</label>
							<div class="col-sm-8 tabular-border">
								<select class="form-control">
									<option value="">Draft</option>
									<option value="">Published</option>
								</select>
							</div>
						</div>

					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="tab-pane" id="meta">
		<div class="panel">
			<div class="panel-body">
				<form action="" class="form-horizontal tabular-form">
					<div class="form-group">
						<label for="" class="control-label col-sm-2">Meta Title</label>
						<div class="col-sm-8 tabular-border">
							<input type="text" class="form-control" maxlength="100">
							<p class="help-block">Maximum 100 characters</p>
						</div>
					</div>
					<div class="form-group">
						<label for="" class="control-label col-sm-2">Meta Description</label>
						<div class="col-sm-8 tabular-border">
							<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
							<p class="help-block">Maximum 1,000 characters</p>
						</div>
					</div>
					<div class="form-group pb0">
						<label for="" class="control-label col-sm-2">Meta Keywords</label>
						<div class="col-sm-8 tabular-border">
							<input type="text" class="form-control">
							<p class="help-block">Maximum 15. Separated by Commas</p>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<div class="tab-pane" id="images">
		<div class="panel">
			<div class="panel-body panel-no-padding">
				<table class="table-hover table-bordered table-striped table vam mb0">
					<thead>
						<tr>
							<th width="100">Image</th>
							<th>Alt Text</th>
							<th width="100">Sort Order</th>
							<th width="100" class="text-center">Base Image</th>
							<th width="100" class="text-center">Thumbnail</th>
							<th width="100">Action</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><img src="{{'demo/stockphoto/beauty_01.jpg' | asset_url | img_loc }}" alt="" class="img-responsive"></td>
							<td><input type="text" class="form-control" placeholder="Image Description"></td>
							<td><input type="text" class="form-control" value="1"></td>
							<td class="text-center"><label for="a" class="radio-inline icheck"><input type="radio" checked></label></td>
							<td class="text-center"><label for="b" class="radio-inline icheck"><input type="radio"></label></td>
							<td><button class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button></td>
						</tr>
						<tr>
							<td><img src="{{'demo/stockphoto/beauty_02.jpg' | asset_url | img_loc }}" alt="" class="img-responsive"></td>
							<td><input type="text" class="form-control" placeholder="Image Description"></td>
							<td><input type="text" class="form-control" value="1"></td>
							<td class="text-center"><label for="c" class="radio-inline icheck"><input type="radio"></label></td>
							<td class="text-center"><label for="d" class="radio-inline icheck"><input type="radio"></label></td>
							<td><button class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button></td>
						</tr>
						<tr>
							<td><img src="{{'demo/stockphoto/beauty_05.jpg' | asset_url | img_loc }}" alt="" class="img-responsive"></td>
							<td><input type="text" class="form-control" placeholder="Image Description"></td>
							<td><input type="text" class="form-control" value="1"></td>
							<td class="text-center"><label for="e" class="radio-inline icheck"><input type="radio"></label></td>
							<td class="text-center"><label for="f" class="radio-inline icheck"><input type="radio" checked></label></td>
							<td><button class="btn btn-default"><i class="fa fa-trash-o"></i> Delete</button></td>
						</tr>
					</tbody>
				</table> 
			</div>
		</div>
	</div>

	<div class="tab-pane" id="reviews">
		<div class="panel">
			<div class="panel-body panel-no-padding">
				<table class="table table-striped table-hover">
					<thead>
						<tr>
							<th>Review #</th>
							<th>Review Date</th>
							<th>Customer Name</th>
							<th>Review Content</th>
							<th>Status</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>29/02/2014 04:12:31 PM</td>
							<td>Clara Oswald</td>
							<td>Extremely useful in my interdimensional travels.</td>
							<td><span class="label label-info">Pending</span></td>
							<td><button class="btn btn-default btn-xs"><i class="fa fa-mail-forward"></i> View</button></td>
						</tr>
						<tr>
							<td>2</td>
							<td>29/02/2014 04:12:31 PM</td>
							<td>Sally Sparrow</td>
							<td>Tends to Blink</td>
							<td><span class="label label-warning">Rejected</span></td>
							<td><button class="btn btn-default btn-xs"><i class="fa fa-mail-forward"></i> View</button></td>
						</tr>
						<tr>
							<td>3</td>
							<td>29/02/2014 04:12:31 PM</td>
							<td>Martha Jones</td>
							<td>Dislikes leading worldwide rebellion against Aliens</td>
							<td><span class="label label-success">Approved</span></td>
							<td><button class="btn btn-default btn-xs"><i class="fa fa-mail-forward"></i> View</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="tab-pane" id="history">
		<div class="panel">
			<div class="panel-body panel-no-padding">
				<table class="table table-striped table-hover mb0">
					<thead>
						<tr>
							<th>Date/Time</th>
							<th>Description</th>
							<th>Status</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>29/02/2014 04:12:31 PM</td>
							<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
							<td><span class="label label-success">Successful</span></td>
							<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
						</tr>
						<tr>
							<td>29/02/2014 04:12:31 PM</td>
							<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
							<td><span class="label label-info">Pending</span></td>
							<td><button class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>


{% endblock %}