{% extends "shared/base.html" %}

{% load render_bundle from webpack_loader %}

{% block title %}Generátor škálovaných odkazů na obrázky v Asset Serveru{% endblock %}
{% block header_name %}Škálované obrázky{% endblock %}
{% block description %}Vyplněním získáš odkaz na zmenšený obrázek z asset serveru, který se dá použít pro embedování.{% endblock %}

{% block head %}
    <link
        rel="stylesheet"
        href="https://styleguide.pirati.cz/2.12.x/css/styles.css"
    >

    {% render_bundle "asset_server_resize" %}
{% endblock %}

{% block content %}
    <main>
        <h1 class="text-6xl font-bebas mb-5">Generátor škálovaných odkazů na obrázky v Asset Serveru</h1>

        <div class="grid grid-cols-2 gap-4">
            <div class="flex flex-col gap-2">
                <form class="flex flex-col gap-2 mb-4" id="asset-info-form">
                    <input
                        id="path"
                        name="path"
                        type="text"
                        pattern="[^ :]+\.(jpg|jpeg|png|webp|gif)"
                        class="text-input form-field__control"
                        placeholder="Cesta k souboru"
                        required
                    >
                    <small class="prose text-sm">
                        <p>
                            Například <code>/jihomoravsky/img/flags/gb.png</code>, pro soubor
                            <a href="https://mrak.pirati.cz/f/475789" target="_blank">zde na
                            Mraku</a>. Cestu najdeš nahoře, vynechej z ní <code>Assets</code>.
                            Na konec dodej název souboru, na který chceš odkázat.
                        </p>
                    </small>

                    <input
                        id="height"
                        name="height"
                        type="number"
                        min="0"
                        class="text-input form-field__control"
                        placeholder="Výška"
                    >
                    <input
                        id="width"
                        name="width"
                        type="number"
                        min="0"
                        class="text-input form-field__control"
                        placeholder="Šírka"
                    >

                    <small class="prose text-sm my-2">
                        <p>
                            Stačí vyplnit pouze jeden rozměr. Obrázek se mu přizpůsobí.
                        </p>
                    </small>

                    <div>
                        <button
                            type="submit"
                            class="btn btn--icon"
                            id="generate-url"
                        >
                            <div class="btn__body-wrap">
                                <div class="btn__body">Vygenerovat</div>
                                <div class="btn__icon">
                                    <i class="ico--chevron-right"></i>
                                </div>
                            </div>
                        </button>
                    </div>
                </form>

                <small class="prose text-sm">
                    <p>
                        Další informace o Asset serveru najdeš na <a
                        href="https://wiki.pirati.cz/to/navody/asset-server" target="_blank">
                        Wiki v návodu</a>.
                    </p>
                </small>
            </div>
            <div id="result-wrapper" class="flex flex-col gap-2 hidden">
                <h3 class="head-alt-sm">Vygenerovaný odkaz</h3>

                <a href="" id="result"></a>
            </div>
        </div>
    </main>
{% endblock %}