{% set rzChatProduct = page.product.id|default(null) %}

<div class="rz-chat"
     data-rz-chat="true"
     data-rz-chat-options='{{ {
         messageUrl: path('frontend.riccardo.chat.message'),
         productId: rzChatProduct
     }|json_encode }}'>
    <section class="rz-chat-panel" id="rz-chat-panel" hidden>
        <header class="rz-chat-head">
            <span class="rz-chat-head-title">Beratung</span>
            <button class="rz-chat-close" type="button" aria-label="Chat schließen">
                <span aria-hidden="true">&times;</span>
            </button>
        </header>

        <div class="rz-chat-log" role="log" aria-live="polite">
            <div class="rz-chat-msg rz-chat-msg--assistant">
                <div class="rz-chat-text">
                    {{ config('RiccardoChat.config.greeting')|default('Hallo! Ich helfe dir bei Geräten, Liquids und Zubehör. Was suchst du?') }}
                </div>
            </div>
        </div>

        <form class="rz-chat-form">
            <label class="visually-hidden" for="rz-chat-input">Deine Frage</label>
            <textarea id="rz-chat-input" class="rz-chat-input" rows="1"
                      placeholder="Deine Frage …" maxlength="1500"></textarea>
            <button class="rz-chat-send" type="submit" aria-label="Frage senden">
                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M4 12h13M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </form>

        <p class="rz-chat-foot">
            Ab 18 Jahren · keine Gesundheitsauskünfte · verbindlich sind die Angaben am Artikel
        </p>
    </section>

    <button class="rz-chat-toggle" type="button" aria-expanded="false" aria-controls="rz-chat-panel">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M21 11.5a8.4 8.4 0 0 1-8.5 8.4 9 9 0 0 1-3.4-.6L4 21l1.4-4a8.1 8.1 0 0 1-1-3.9A8.4 8.4 0 0 1 12.9 3a8.4 8.4 0 0 1 8.1 8.5z"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="rz-chat-toggle-label">Beratung</span>
    </button>
</div>