{% extends 'base.html' %}
{% load utility_tags %}

{% block jumbotron %}
	<h1>{{ current_app.name }}</h1>
	<p class="lead">{{ current_app.description|safe }}</p>
{% endblock %}

{% block content %}
	<div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Search Wallpapers</h3>
				</div>

				<div class="panel-body">
					<form method="POST" action="">
						{% csrf_token %}

						{% for error in form.non_field_errors %}
							<div class="alert alert-danger alert-dismissible fade in" role="alert">
								<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<strong>Warning!</strong> {{ error }}
							</div>
						{% endfor %}
						
						<fieldset>
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
									{% form_field form.search_phrase %}
								</div>
							</div>

							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
									{% form_field form.random checkbox_text='Check this option for random wallpapers - possibility of mature content!' %}
								</div>
							</div>
						</fieldset>

						<footer>
							<input class="btn btn-primary" type="submit" name="submit" value="Search">
							<a class="btn btn-default" href="">Reset Form</a>
						</footer>

					</form>
				</div>

			</div>
		</div>
	</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript">
	'use strict';
	$(document).ready(function() {
		setTimeout(function(){
			$('.alert').alert('close');
		}, 5000);
	})
</script>
{% endblock %}
