---
layout: app/app-layout
pagename: item-editor
images:
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
gallery:
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
  - url: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
---
<div class="title-block">
	<h3 class="title">
		Add new item <span class="sparkline bar" data-type="bar"></span>
	</h3>
</div>


<form name="item">
	<div class="card card-block">

		<div class="form-group row">
			<label class="col-sm-2 form-control-label text-xs-right">
				Name:
			</label>
			<div class="col-sm-10">
				<input type="text" class="form-control boxed" placeholder="">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-2 form-control-label text-xs-right">
				Content:
			</label>
			<div class="col-sm-10">

				{{#editor}}
					Hello World
				{{/editor}}

			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-2 form-control-label text-xs-right">
				Category:
			</label>
			<div class="col-sm-10">
				<select class="c-select form-control boxed">
					<option selected>Select Category</option>
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
				</select>
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-2 form-control-label text-xs-right">
				Images:
			</label>
			<div class="col-sm-10">
				<div class="images-container">
					{{#each images}}
						<div class="image-container">
							<div class="controls">
								<a href="" class="control-btn move">
									<i class="fa fa-arrows"></i>
								</a><!--
								--><a href="" class="control-btn star">
									<i class="fa"></i>
								</a><!--
								--><a href="#" class="control-btn remove" data-toggle="modal" data-target="#confirm-modal">
									<i class="fa fa-trash-o"></i>
								</a>
							</div>

							{{!-- {{this}} --}}
							{{!-- {{../images.thumbnails.[this]}} --}}

							<div class="image" style="background-image:url('{{this.url}}')"></div>
						</div>
					{{/each}}
					<a href="#" class="add-image" data-toggle="modal" data-target="#modal-media">
						<div class="image-container new">
							<div class="image" >
								<i class="fa fa-plus"></i>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>


		<div class="form-group row">
			<div class="col-sm-10 col-sm-offset-2">
				<button type="submit" class="btn btn-primary">
					Submit
				</button>
			</div>
		</div>




	</div>
</form>
