{% extends "base.html" %}

{% block head %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="scripts/jquery.awesomeCloud-0.2.min.js"></script>
{% endblock %}

{% block content %}
<div class="flex flex-col h-screen">
    <header class="flex items-center justify-between bg-white px-4 py-4 sm:px-6 lg:px-8">
        <form action="/" method="get" class="flex items-center space-x-4">
            <button tabindex="-1" type="submit" class="border-none focus:outline-none">
                <h1 class="flex items-center text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl"><span class="text-6xl font-extrabold text-red-500"> Tag </span><span class="ml-2 text-5xl"> anrog </span></h1>
            </button>
        </form>
        <div class="mx-auto w-full max-w-xl" id="autocomplete"></div>
        <a class="border-none focus:outline-none mx-1.5" href="/tags">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#EF4444" class="h-6 w-6">
                <g id="SVGRepo_bgCarrier" stroke-width="0"/>
                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
                <g id="SVGRepo_iconCarrier"> <path d="M20 11L3 11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> <path d="M11 16H3" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> <path d="M14 18L17.5 15L21 18" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 6L13.5 6M20 6L17.75 6" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/> </g>
            </svg>
        </a>
        <a class="border-none focus:outline-none mx-1.5" href="/upload">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#EF4444" class="h-6 w-6">
                <path stroke-linecap="round" color="#EF4444" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
            </svg>
        </a>
    </header>
    <div id="demo" class="w-full min-w-full max-w-full h-full min-h-full max-h-full !z-0">
        {% for tag in tags %}
            <span data-weight="{{ tag.media_count }}">{{ tag.last }}</span>
        {% endfor %}
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#demo").awesomeCloud({
            "size" : {
                "factor" : 0, // font resize factor, 0 means automatic
                "normalize" : false // reduces outliers for more attractive output
            },
            "color" : {
                "background" : "rgba(255,255,255,0)", // background color, transparent by default
                "start" : "#20f", // color of the smallest font, if options.color = "gradient""
                "end" : "rgb(200,0,0)" // color of the largest font, if options.color = "gradient"
            },
            "options" : {
                "color" : "random-dark", // random-light, random-dark, gradient
                "rotationRatio" : 0.35, // 0 is all horizontal, 1 is all vertical
                "printMultiplier" : 3, // set to 3 for nice printer output; higher numbers take longer
                "sort" : "random" // highest, lowest or random
            },
            "font" : "'Times New Roman', Times, serif", //  the CSS font-family string
            "shape" : "circle" // circle, square, star or a theta function describing a shape
        });
    });
</script>
{% include "algolia_autocomplete.html" %}
{% endblock %}