---
layout: app/app-layout
pagename: items-list
items:
  - title: 12 Myths Uncovered About IT & Software
    img: https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg
    sales: 46323
    author: Meadow Katheryne
    category: Software
    date: 21 SEP 10:45
  - title: 50% of things doesn't really belongs to you
    img: https://s3.amazonaws.com/uifaces/faces/twitter/_everaldo/128.jpg
    sales: 4567
    author: Alexander Sargssyan
    category: Hardware
    date: 21 SEP 10:45
  - title: Vestibulum tincidunt amet laoreet mauris sit sem aliquam cras maecenas vel aliquam.
    img: https://s3.amazonaws.com/uifaces/faces/twitter/eduardo_olv/128.jpg
    sales: 854
    author: Some Long Author Name
    category: Anywhere
    date: 21 SEP 10:45
  - title:  Lorem Ipsum is not simply random text
    img: https://s3.amazonaws.com/uifaces/faces/twitter/why_this/128.jpg
    sales: 1861
    author: Willard Bennett
    category: Something
    date: 21 SEP 10:45
  - title: Ut dui quis amet curabitur vestibulum
    img: https://s3.amazonaws.com/uifaces/faces/twitter/w7download/128.jpg
    sales: 7891
    author: Ivy Lorrie
    category: Something Else
    date: 21 SEP 10:45
  - title: Mus sociosqu etiam autem rutrum at molestie elit pulvinar
    img: https://s3.amazonaws.com/uifaces/faces/twitter/pankogut/128.jpg
    sales: 95150
    author: Evander Archie
    category: Other
    date: 21 SEP 10:45
---
<div class="title-search-block">

	<div class="title-block">
		<div class="row">

			{{!-- Title --}}
			<div class="col-md-6">
				<h3 class="title">
					Items
					<a href="item-editor.html" class="btn btn-primary btn-sm rounded-s">
						Add New
					</a><!--
				 --><div class="action dropdown">
						<button class="btn  btn-sm rounded-s btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							More actions...
						</button>
						<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
							<a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o icon"></i>Mark as a draft</a>
							<a class="dropdown-item" href="#" data-toggle="modal" data-target="#confirm-modal"><i class="fa fa-close icon"></i>Delete</a>
						</div>
					</div>
				</h3>
				<p class="title-description">
					List of sample items - e.g. books, movies, events, etc...
				</p>
			</div>

		</div>
	</div>


	<div class="items-search">
		<form class="form-inline">
			<div class="input-group">
				<input type="text" class="form-control boxed rounded-s" placeholder="Search for...">
				<span class="input-group-btn">
					<button class="btn btn-secondary rounded-s" type="button">
						<i class="fa fa-search"></i>
					</button>
				</span>
			</div>
		</form>
	</div>
</div>

<div class="card items">
	<ul class="item-list striped">
		<li class="item item-list-header">
			<div class="item-row">
				<div class="item-col fixed item-col-check">
					<label class="item-check" id="select-all-items">
						<input type="checkbox" class="checkbox">
						<span></span>
					</label>
				</div>
				<div class="item-col item-col-header fixed item-col-img md">
					<div>
						<span>Media</span>
					</div>
				</div>
				<div class="item-col item-col-header item-col-title">
					<div>
						<span>Name</span>
					</div>
				</div>
				<div class="item-col item-col-header item-col-sales">
					<div>
						<span>Sales</span>
					</div>
				</div>
				<div class="item-col item-col-header item-col-stats">
					<div class="no-overflow">
						<span>Stats</span>
					</div>
				</div>
				<div class="item-col item-col-header item-col-category">
					<div class="no-overflow">
						<span>Category</span>
					</div>
				</div>
				<div class="item-col item-col-header item-col-author">
					<div class="no-overflow">
						<span>Author</span>
					</div>
				</div>
				<div class="item-col item-col-header item-col-date">
					<div>
						<span>Published</span>
					</div>
				</div>
				<div class="item-col item-col-header fixed item-col-actions-dropdown">

				</div>
			</div>
		</li>
		{{#each items}}
			<li class="item">

				<div class="item-row">

					<div class="item-col fixed item-col-check">

						<label class="item-check" id="select-all-items">
							<input type="checkbox" class="checkbox">
							<span></span>
						</label>
					</div>

					<div class="item-col fixed item-col-img md">
						<a href="item-editor.html">
							<div class="item-img rounded" style="background-image: url({{this.img}})"></div>
						</a>
					</div>
					<div class="item-col fixed pull-left item-col-title">
						<div class="item-heading">Name</div>
						<div>
							<a href="item-editor.html" class="">
								<h4 class="item-title">
									{{this.title}}
								</h4>
							</a>
						</div>
					</div>
					<div class="item-col item-col-sales">
						<div class="item-heading">Sales</div>
						<div>
							{{this.sales}}
						</div>
					</div>
					<div class="item-col item-col-stats no-overflow">
						<div class="item-heading">Stats</div>
						<div class="no-overflow">
							<div class="item-stats sparkline" data-type="bar"></div>
						</div>
					</div>
					<div class="item-col item-col-category no-overflow">
						<div class="item-heading">Category</div>
						<div class="no-overflow">
							<a href="">{{this.category}}</a>
						</div>
					</div>
					<div class="item-col item-col-author">
						<div class="item-heading">Author</div>
						<div class="no-overflow">
							<a href="">{{this.author}}</a>
						</div>
					</div>
					<div class="item-col item-col-date">
						<div class="item-heading">Published</div>
						<div class="no-overflow">
							{{this.date}}
						</div>
					</div>
					<div class="item-col fixed item-col-actions-dropdown">
						<div class="item-actions-dropdown">
							<a class="item-actions-toggle-btn">
								<span class="inactive">
									<i class="fa fa-cog"></i>
								</span>
								<span class="active">
								<i class="fa fa-chevron-circle-right"></i>
								</span>
							</a>
							<div class="item-actions-block">
                                <ul class="item-actions-list">
                                    <li>
                                        <a class="remove" href="#" data-toggle="modal" data-target="#confirm-modal">
                                            <i class="fa fa-trash-o "></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="edit" href="item-editor.html">
                                            <i class="fa fa-pencil"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
						</div>
					</div>

				</div>
			</li>
		{{/each}}
	</ul>
</div>

<nav class="text-right">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="">
				Prev
			</a>
		</li>
		<li class="page-item active">
			<a class="page-link" href="">
				1
			</a>
		</li>
		<li class="page-item">
			<a class="page-link" href="">
				2
			</a>
		</li>
		<li class="page-item">
			<a class="page-link" href="">
				3
			</a>
		</li>
		<li class="page-item">
			<a class="page-link" href="">
				4
			</a>
		</li>
		<li class="page-item">
			<a class="page-link" href="">
				5
			</a>
		</li>
		<li class="page-item">
			<a class="page-link" href="">
				Next
			</a>
		</li>
	</ul>
</nav>
