{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_content %}
    {% set input = page.requestData %}
    {% set result = page.result %}
    <div class="container rlc-page">
        <header class="rlc-hero">
            <span class="rlc-hero-word" aria-hidden="true">Mischen</span>
            <div class="rlc-hero-copy">
                <h1>Liquid&shy;rechner</h1>
                <p>Sag uns Zielmenge, Nikotinstärke und Aromaanteil – wir sagen dir, wie viel Basis, Aroma und Nikotin-Shots du brauchst.</p>
            </div>
        </header>

        <form class="rlc-layout" action="{{ path('frontend.riccardo.liquidcalc.page') }}" method="post" data-rlc-form="true">
            <div class="rlc-form">
                <fieldset class="rlc-mode">
                    <legend>Was hast du vor?</legend>
                    <label class="rlc-radio"><input type="radio" name="mode" value="diy" {{ input.mode == 'diy' ? 'checked' : '' }}><span>Selbst mischen<small>Aroma in Prozent</small></span></label>
                    <label class="rlc-radio"><input type="radio" name="mode" value="longfill" {{ input.mode == 'longfill' ? 'checked' : '' }}><span>Longfill auffüllen<small>Aroma ist schon in der Flasche</small></span></label>
                </fieldset>

                <div class="rlc-fields">
                    <label class="rlc-field">
                        <span>Zielmenge</span>
                        <span class="rlc-input"><input type="number" name="totalMl" min="1" max="2000" step="1" value="{{ input.totalMl }}" data-rlc-input><em>ml</em></span>
                    </label>

                    <label class="rlc-field">
                        <span>Nikotin im fertigen Liquid</span>
                        <span class="rlc-input"><input type="number" name="targetNicotine" min="0" max="20" step="0.5" value="{{ input.targetNicotine }}" data-rlc-input><em>mg/ml</em></span>
                    </label>

                    <label class="rlc-field" data-rlc-only="diy">
                        <span>Aromaanteil</span>
                        <span class="rlc-input"><input type="number" name="aromaPercent" min="0" max="100" step="0.5" value="{{ input.aromaPercent }}" data-rlc-input><em>%</em></span>
                    </label>

                    <label class="rlc-field" data-rlc-only="longfill" hidden>
                        <span>Aroma in der Flasche</span>
                        <span class="rlc-input"><input type="number" name="aromaMl" min="0" max="500" step="0.5" value="{{ input.aromaMl }}" data-rlc-input><em>ml</em></span>
                    </label>

                    <label class="rlc-field">
                        <span>Stärke deiner Shots</span>
                        <span class="rlc-input"><input type="number" name="shotNicotine" min="1" max="100" step="1" value="{{ input.shotNicotine }}" data-rlc-input><em>mg/ml</em></span>
                    </label>

                    <label class="rlc-field">
                        <span>Größe eines Shots</span>
                        <span class="rlc-input"><input type="number" name="shotSize" min="1" max="100" step="1" value="{{ input.shotSize }}" data-rlc-input><em>ml</em></span>
                    </label>
                </div>

                <details class="rlc-advanced">
                    <summary>PG/VG-Verhältnis angeben</summary>
                    <div class="rlc-fields">
                        <label class="rlc-field">
                            <span>VG in der Basis</span>
                            <span class="rlc-input"><input type="number" name="baseVg" min="0" max="100" step="5" value="{{ input.baseVg }}" data-rlc-input><em>%</em></span>
                        </label>
                        <label class="rlc-field">
                            <span>VG in den Shots</span>
                            <span class="rlc-input"><input type="number" name="shotVg" min="0" max="100" step="5" value="{{ input.shotVg }}" data-rlc-input><em>%</em></span>
                        </label>
                        <label class="rlc-field">
                            <span>VG im Aroma</span>
                            <span class="rlc-input"><input type="number" name="aromaVg" min="0" max="100" step="5" value="{{ input.aromaVg }}" data-rlc-input><em>%</em></span>
                        </label>
                    </div>
                </details>

                <button class="btn btn-primary btn-lg rlc-submit" type="submit">Berechnen</button>
            </div>

            <aside class="rlc-result" data-rlc-result aria-live="polite">
                {% sw_include '@RiccardoLiquidCalc/storefront/riccardo-liquid-calc/result.html.twig' with { result: result, input: input } %}
                {% sw_include '@RiccardoLiquidCalc/storefront/riccardo-liquid-calc/einkauf.html.twig' with { einkauf: page.einkauf, luecken: page.luecken } %}
            </aside>
        </form>

        <section class="rlc-info">
            <h2>Gut zu wissen</h2>
            <ul>
                <li><strong>Nikotin steckt nur in den Shots.</strong> Wie viel Shot du brauchst, ergibt sich aus Zielmenge × Zielstärke ÷ Shotstärke.</li>
                <li><strong>Mehr als 20 mg/ml</strong> sind in der EU für fertige Liquids nicht zulässig.</li>
                <li><strong>Reifen lassen:</strong> Nach dem Mischen ein bis zwei Tage stehen lassen, bei Tabak- und Dessertsorten gern länger.</li>
                <li><strong>Vorsicht mit Nikotin:</strong> Handschuhe tragen, nicht auf die Haut, außer Reichweite von Kindern.</li>
                <li>Passende Zutaten findest du unter <a href="/Basen-Nikotinshots/Basen/">Basen</a>, <a href="/Basen-Nikotinshots/Nikotinshots/">Nikotinshots</a> und <a href="/Aromen/">Aromen</a>.</li>
            </ul>
        </section>
    </div>
{% endblock %}