{% extends "snippets/layout.html" %}

{% block title '¯\\_(ツ)_/¯ | Maximilian Möhring' %}

{% block css %}
		html {
			width: 100%;
		}
		.main {
		}
		h2 {
			margin-top: 3rem;
			margin-bottom: 3rem;
		}
		hr {
			margin-top: 1rem;
			border-top-color: #f07206 !important;
			width: 50%;
		}
		.hidden {
			visibility: hidden;
		}
		.face {
			font-size: 2rem;
			margin-top: 0.5rem;
			margin-bottom: 0.5rem;
			color: #e1e1e1;
		}
		@media (max-width: 768px ) {
				.face {
					padding-right: 0px !important;
					padding-left: 0px !important;
					font-size: 1.5rem;
					margin-top: 0.5rem;
					margin-bottom: 0.5rem;
				}
				.face-col {
					padding-right: 1px;
					padding-left: 1px;
				}
		}
		.faces-start {
			margin-left: 0;
		}
		#faces-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 60px; /* Set the fixed height of the footer here */
			line-height: 60px; /* Vertically center the text there */
			/*
			background-color: #f5f5f5;
			background-color: #67e567;
			*/
			background-color: #90dd90;
			color: #008000;
		}

		.btn-outline-light {
			border-color: #262626;
		}
{% endblock %}

{% block main %}

<div class="container">

	<div class="flavor-text">
		<h1>Best faces on the net</h1>
		<em>Search, find and click to copy.</em> ヾ(⌐■_■)ノ♪
	</div>
	<div class="row text-center faces-start">

{% for subtitle, args in faces %}
	<h2 class="col-12 float-left subtitle">{{ subtitle }}
	<hr>
	</h2>
	<br>

	{% for face in args %}
		<div class="col-12 col-lg-6 text-center face-col">
			<button class="btn btn-outline-light face">{{ face }}</button>
		</div>
	{% endfor %}
{% endfor %}

	</div>
</div>

<div id="faces-footer" class="hidden">
	<div class="container text-center">
	Copied that!
	</div>
</div>

<script>
	function copy(that){
		var inp = document.createElement('input');
		document.body.appendChild(inp)
		inp.value = that;
		inp.select();
		document.execCommand('copy',false);
		console.log("Copied: " + inp.value);
		inp.remove();
		successfull_copied();
	};
	function successfull_copied() {
		var footer = document.getElementById('faces-footer');
		footer.classList.remove('hidden');
		setTimeout(function(){ document.getElementById('faces-footer').classList.add('hidden'); }, 3000);
	};
	window.addEventListener("load",function() {
		var faces = document.getElementsByClassName('face');
		for ( var i = 0; i<faces.length; i++) {
			faces[i].addEventListener("click", function(e){
				console.log(e.target.textContent);
				copy(e.target.textContent);
			});
		}
	});
</script>

{% endblock %}