{# Pflichtangaben zu einem Artikel: CLP, Zusammensetzung, GPSR, Sicherheitsdatenblatt #}
{% import '@RiccardoCompliance/storefront/riccardo-compliance/ghs.html.twig' as ghs %}
{% set data = riccardo_compliance(product) %}
{% if data %}
    {% set profile = data.profile %}
    {% set composition = data.composition %}

    {# Hersteller und Verantwortlicher: am Artikel gepflegt, sonst der
     # Hersteller des Artikels selbst. Ohne diese Zeile blieb die Karte leer,
     # sobald kein Profil griff – und die Überschrift stand allein da. #}
    {% set zeigeHersteller = (profile and (profile.manufacturerName or profile.responsibleName)) or data.manufacturer.name %}
    {% set zeigeDokumente = data.document or (profile and (profile.sdsMedia or profile.additionalInfo)) %}
    {% set zeigeClp = (profile and profile.hasClp) or data.ufi %}
{% endif %}

{% if data and (zeigeClp or composition|length or zeigeHersteller or zeigeDokumente) %}
    {#
     # Zugeklappt, weil der Block sonst den halben Bildschirm füllt – die
     # Pflichtangaben gehören auf die Seite, aber nicht zwischen Kunde und
     # Kaufentscheidung.
     #
     # Bewusst <details> und nicht ein Akkordeon aus JavaScript: es klappt
     # auch ohne Skript auf, der Browser kündigt es Screenreadern von sich
     # aus als aufklappbar an, und die Seitensuche (Strg+F) findet den
     # Inhalt trotzdem – Chrome und Firefox klappen dafür selbst auf.
     #
     # Was NICHT mit zuklappt: Signalwort und der Nikotinhinweis. Die
     # stehen in der Zeile, die immer sichtbar ist. Eine Warnung, die man
     # erst aufklappen muss, um sie überhaupt zu bemerken, ist keine.
     #}
    <details class="rc-section" id="rz-pdp-compliance">
        <summary class="rc-summary">
            <h2 id="rc-section-title">Pflichtangaben &amp; Sicherheit</h2>
            <span class="rc-summary-kurz">
                {% if profile and profile.pictograms|length %}
                    <span class="rc-summary-pik">
                        {% for code in profile.pictograms %}{{ ghs.pictogram(code, 34) }}{% endfor %}
                    </span>
                {% endif %}
                {% if profile and profile.signalWordLabel %}
                    <strong class="rc-summary-signal">{{ profile.signalWordLabel }}</strong>
                {% endif %}
                {% if profile and profile.contains|length %}
                    <span class="rc-summary-enthaelt">Enthält: {{ profile.contains|join(', ') }}</span>
                {% endif %}
                {% if profile and profile.warning %}
                    <span class="rc-summary-nikotin">{{ profile.warning|striptags }}</span>
                {% endif %}
            </span>
            <span class="rc-summary-mehr" aria-hidden="true">Angaben anzeigen</span>
        </summary>

        {% if zeigeClp %}
            <div class="rc-clp">
                {% if profile.pictograms|length %}
                    <div class="rc-clp-pictograms">
                        {% for code in profile.pictograms %}{{ ghs.pictogram(code, 72) }}{% endfor %}
                    </div>
                {% endif %}
                <div class="rc-clp-body">
                    {# Signalwort und "Enthält" stehen in der Kopfzeile und
                     # werden hier nicht wiederholt. #}
                    {% if profile.hazardStatements|length %}
                        <ul class="rc-statements">
                            {% for statement in profile.hazardStatements %}
                                <li><strong>{{ statement.code }}</strong> {{ statement.text }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                    {% if profile.precautionaryStatements|length %}
                        <ul class="rc-statements rc-statements--p">
                            {% for statement in profile.precautionaryStatements %}
                                <li><strong>{{ statement.code }}</strong> {{ statement.text }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                    {% if data.ufi %}
                        <p class="rc-ufi">UFI: <code>{{ data.ufi }}</code> <span>Rezepturkennung für den Notfall – dieselbe Nummer steht auf der Flasche.</span></p>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        <div class="rc-grid">
            {% if composition|length %}
                <div class="rc-card">
                    <h3>Zusammensetzung</h3>
                    <dl>
                        {% if composition.nicotine is defined %}
                            <div><dt>Nikotingehalt</dt><dd>{{ composition.nicotine|number_format(composition.nicotine == composition.nicotine|round ? 0 : 1, ',', '.') }} mg/ml</dd></div>
                        {% endif %}
                        {% if composition.baseRatio is defined %}<div><dt>Basis (PG/VG)</dt><dd>{{ composition.baseRatio }}</dd></div>{% endif %}
                        {% if composition.volume is defined %}<div><dt>Füllmenge</dt><dd>{{ composition.volume|number_format(composition.volume == composition.volume|round ? 0 : 1, ',', '.') }} ml</dd></div>{% endif %}
                        {% if composition.tpdId is defined %}<div><dt>Meldenummer (EU-CEG)</dt><dd>{{ composition.tpdId }}</dd></div>{% endif %}
                    </dl>
                    {% if composition.ingredients is defined %}
                        <h4>Inhaltsstoffe</h4>
                        <p class="rc-ingredients">{{ composition.ingredients|join(' · ') }}</p>
                    {% endif %}
                </div>
            {% endif %}

            {% if zeigeHersteller %}
                <div class="rc-card">
                    <h3>Hersteller &amp; Verantwortlicher</h3>
                    {% if (profile and profile.manufacturerName) or data.manufacturer.name %}
                        <h4>Hersteller</h4>
                        <p>
                            {{ (profile and profile.manufacturerName) ? profile.manufacturerName : data.manufacturer.name }}
                            {% if profile and profile.manufacturerAddress %}<br>{{ profile.manufacturerAddress|nl2br }}{% endif %}
                            {% if profile and profile.manufacturerEmail %}<br><a href="mailto:{{ profile.manufacturerEmail }}">{{ profile.manufacturerEmail }}</a>{% endif %}
                            {% if not (profile and profile.manufacturerAddress) and data.manufacturer.link %}<br><a href="{{ data.manufacturer.link }}" target="_blank" rel="noopener nofollow">{{ data.manufacturer.link }}</a>{% endif %}
                        </p>
                    {% endif %}
                    {% if profile and profile.responsibleName %}
                        <h4>Verantwortliche Person in der EU</h4>
                        <p>
                            {{ profile.responsibleName }}
                            {% if profile.responsibleAddress %}<br>{{ profile.responsibleAddress|nl2br }}{% endif %}
                            {% if profile.responsibleEmail %}<br><a href="mailto:{{ profile.responsibleEmail }}">{{ profile.responsibleEmail }}</a>{% endif %}
                            {% if profile.responsibleUrl %}<br><a href="{{ profile.responsibleUrl }}" target="_blank" rel="noopener">{{ profile.responsibleUrl }}</a>{% endif %}
                        </p>
                    {% endif %}
                </div>
            {% endif %}

            {% if zeigeDokumente %}
                <div class="rc-card">
                    <h3>Dokumente &amp; Hinweise</h3>
                    {% if data.document %}
                        <p><a class="rc-sds" href="{{ data.document.media.url }}" target="_blank" rel="noopener">Sicherheitshinweise des Herstellers (PDF)</a></p>
                    {% endif %}
                    {% if profile and profile.sdsMedia %}
                        <p><a class="rc-sds" href="{{ profile.sdsMedia.url }}" target="_blank" rel="noopener">Sicherheitsdatenblatt (PDF)</a></p>
                    {% endif %}
                    {% if profile and profile.additionalInfo %}<div class="rc-additional">{{ profile.additionalInfo|raw }}</div>{% endif %}
                </div>
            {% endif %}
        </div>

        <p class="rc-note">Angaben nach CLP-Verordnung (EG) Nr. 1272/2008 und Produktsicherheitsverordnung (EU) 2023/988. Verbindlich sind die Angaben auf der Produktverpackung.</p>
    </details>
{% endif %}