<section id="filter-bar">
	<div class="container">
		
		<div class="pull-left">
			<div class="form-group">
				<label for="name">{{ 'search' | translate }}</label>
				<input name="name" ng-model="filters.query" class="form-control">
			</div>

			<div class="form-group">
				<label for="status">{{ 'status' | translate }}</label>
				<select name="status" ng-model="filters.status" class="form-control">
					<option value="">{{ 'all' | translate }}</option>
					<option value="1">{{ 'published' | translate }}</option>
					<option value="0">{{ 'unpublished' | translate }}</option>
				</select>
			</div>

			<div class="form-group">
				<label for="status">{{ 'sort' | translate }}</label>
				<select name="status" ng-model="filters.sort" ng-change="filters.setSortProp()" class="form-control">
					<option value="newest">{{ 'newest' | translate }}</option>
					<option value="oldest">{{ 'oldest' | translate }}</option>
					<option value="a-z">{{ 'aZ' | translate }}</option>
					<option value="z-a">{{ 'zA' | translate }}</option>
				</select>
			</div>	
		</div>

		<div class="pull-right">
			<a ui-sref="new" class="btn btn-success">{{ 'createNewProject' | translate }}</a>
		</div>

	</div>
</section>

<section id="dashboard-container">

	<div class="container">

		<div ng-if="isDemo" class="alert alert-info">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
			Note that the demo site will reset every 20 minutes. All projects, themes, templates and uploads will be deleted or reverted to their original state.
		</div>

		<ul id="projects-list" ng-if="projects.all.length" class="row">
			<li ng-repeat="project in projects.all | filter:{name:filters.query} | filter:{published:filters.status} | orderBy:filters.order:filters.reverse" class="col-sm-4 col-lg-3">
				<figure data-name="{{ project.name }}">
					<div class='header clearfix'>
						<a title="Preview Project" target="_blank" href="{{ baseUrl + '/projects/'+project.id+'/render' }}" class="url pull-left">{{ 'viewProject' | translate }}</a>
						<input title="Publish/Unpublish Project" class="pull-right" ng-checked="project.published" ng-model="project.published" ng-change="togglePublished(project)" type="checkbox">
					</div>
					<img bl-open-in-builder class="img-responsive" ng-src="assets/images/projects/project-{{project.id}}.png">
					<figcaption class="clearfix">
						<div class="pull-left name">{{ project.name }}</div>
						<div class="pull-right">
							<i title="Publish Project" bl-open-publish-modal="{{ project.id }}" class="publish-project fa fa-cloud"></i>
							<i title="Delete Project" ng-click="deleteProject(project)" class="delete-project fa fa-trash-o"></i>
							<i title="Open in Builder" bl-open-in-builder class="edit-project fa fa-pencil"></i>
						</div>
					</figcaption>
					<div class="spinner hidden">
						<i class="fa fa-spinner fa-spin"></i>
					</div>
				</figure>
			</li>
		</ul>

		<div id="no-projects" ng-if="!projects.all.length" class="text-center">
			<h3>{{ 'noProjects' | translate }}</h3>
			<a ui-sref="new" class="btn btn-success">{{ 'createOneNow' | translate }}</a>
		</div>

	</div>
	
</section>