{% sw_extends '@Storefront/storefront/base.html.twig' %}
{% import '@RiccardoTheme/storefront/rz/flavor.html.twig' as rz %}

{% block base_content %}
    <div class="container rs-starter" data-rs-starter>
        <header class="rs-starter-hero">
            <span class="rs-starter-hero-word" aria-hidden="true">Starterset</span>
            <div class="rs-starter-hero-copy">
                <h1>Starterset zusammenstellen</h1>
                <p>Vier Schritte, ein kompletter Satz: Gerät, Liquid, bei Bedarf Basis und Shots, dazu
                    Ersatzteile. Du siehst jederzeit, was das Set kostet.</p>
            </div>
        </header>

        {% if page.steps is empty %}
            <div class="rs-starter-empty">
                <p>Hier stellst du bald dein Starterset zusammen – sobald die Artikel für die
                    einzelnen Schritte im Shop sind.</p>
                <p><a href="/berater?ziel=beides">Zum Berater für Gerät und Geschmack</a></p>
            </div>
        {% else %}
            <form class="rs-starter-layout" action="{{ path('frontend.riccardo.starter.add') }}" method="post">
                <div class="rs-starter-steps">
                    {% for step in page.steps %}
                        <section class="rs-step" data-rs-step="{{ step.key }}">
                            <header class="rs-step-head">
                                <span class="rs-step-number">{{ loop.index }}</span>
                                <div>
                                    <h2>{{ step.title }}{% if not step.required %} <small>optional</small>{% endif %}</h2>
                                    <p>{{ step.hint }}</p>
                                </div>
                            </header>

                            <div class="rs-step-products">
                                {% for product in step.products %}
                                    {% set inputId = 'rs-' ~ step.key ~ '-' ~ loop.index %}
                                    {% set price = product.calculatedCheapestPrice ?? product.calculatedPrice %}
                                    <label class="rs-pick" for="{{ inputId }}">
                                        <input class="rs-pick-input"
                                               id="{{ inputId }}"
                                               type="{{ step.multiple ? 'checkbox' : 'radio' }}"
                                               name="products[]"
                                               value="{{ product.id }}"
                                               data-rs-price="{{ price.unitPrice }}"
                                               {% if not step.multiple %}data-rs-group="{{ step.key }}"{% endif %}>
                                        <span class="rs-pick-media">
                                            {% if product.cover and product.cover.media %}
                                                {% sw_thumbnails 'rs-pick-image' with {
                                                    media: product.cover.media,
                                                    sizes: { default: '160px' },
                                                    attributes: { class: 'rs-pick-img', alt: product.translated.name }
                                                } %}
                                            {% endif %}
                                        </span>
                                        <span class="rs-pick-body">
                                            {# gleiche Aufteilung wie auf den Produktkarten: Marke als Linie, Rest als Name #}
                                            {% set rsParts = rz.nameParts(product, false)|split('|') %}
                                            {% if rsParts[0] %}
                                                <span class="rs-pick-brand">{{ rsParts[0] }}</span>
                                            {% endif %}
                                            <strong class="rs-pick-name">{{ rsParts[1] }}{% if rsParts[2] %} <span class="rs-pick-extra">{{ rsParts[2] }}</span>{% endif %}</strong>
                                            <span class="rs-pick-price">{{ price.unitPrice|currency }}</span>
                                        </span>
                                        <span class="rs-pick-mark" aria-hidden="true"></span>
                                    </label>
                                {% endfor %}
                            </div>

                            {% if step.key == 'base' %}
                                <p class="rs-step-note">
                                    Wie viel Basis und wie viele Shots du brauchst, rechnet dir der
                                    <a href="/liquidrechner">Liquidrechner</a> aus.
                                </p>
                            {% endif %}
                        </section>
                    {% endfor %}
                </div>

                <aside class="rs-starter-summary" data-rs-summary>
                    <h2>Dein Set</h2>
                    <ul class="rs-summary-list" data-rs-summary-list>
                        <li class="rs-summary-empty">Noch nichts ausgewählt.</li>
                    </ul>
                    <div class="rs-summary-total">
                        <span>Summe</span>
                        <strong data-rs-summary-total>{{ 0|currency }}</strong>
                    </div>
                    {% if page.promotionHint %}
                        <p class="rs-summary-hint">{{ page.promotionHint }}</p>
                    {% endif %}
                    <button class="btn btn-primary btn-lg rs-summary-submit" type="submit">Set in den Warenkorb</button>
                    <p class="rs-summary-note">Preise inkl. MwSt. zzgl. <a href="/versand-und-zahlung">Versandkosten</a>.
                        Nikotinhaltige Artikel geben wir nur an Personen ab 18 Jahren ab.</p>
                </aside>
            </form>
        {% endif %}
    </div>
{% endblock %}