{% extends '_layouts/cp' %}
{% set title = "Splash!"|t %}

{% block containerAttributes %}
	class="splash--container"
	id="container"
{% endblock %}

{% block actionButton %}
	<div class="texticon search icon clearable">
		<form id="splashSearch">
			<input class="text fullwidth" type="text" autofocus
			       placeholder="Search Unsplash...">
		</form>
	</div>
{% endblock %}

{% set mobile = craft.app.request.isMobileBrowser() %}
{% set tablet = not mobile and craft.app.request.isMobileBrowser(true) %}

{% block content %}
	<div class="splash--grid{{ tablet ? " tablet" : mobile ? " mobile" }}"
	     id="splashGrid">
		{% set cols = tablet ? 2 : mobile ? 1 : 3 %}
		{% for i in 1..cols %}
			<div></div>
		{% endfor %}
	</div>
	<div id="splashEmpty" class="splash--empty"></div>
	<div id="splashMore" class="splash--more"></div>
{% endblock %}