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

{% block page_title %}Bedienungsanleitungen{% endblock %}

{% block base_main_inner %}
    <div class="container rz-manuals">
        <header class="rz-cat-head rz-cat-head--kuehl">
            <span class="rz-cat-head-word" aria-hidden="true">Anleitungen</span>
            <div class="rz-cat-head-crumbs"><span class="rz-eyebrow">Hilfe</span></div>
            <h1 class="rz-cat-head-title">Bedienungsanleitungen</h1>
            <p class="rz-cat-head-text">Anleitung zu deinem Gerät als PDF – such nach Gerät, Marke oder Serie.</p>
        </header>

        <form class="rz-manuals-search" method="get" action="{{ path('frontend.riccardo.manuals.page') }}">
            <div class="rz-manuals-search-row">
                <label class="visually-hidden" for="rz-manual-q">Suche</label>
                <input class="form-control" type="search" id="rz-manual-q" name="q" value="{{ term }}"
                       placeholder="Gerät, Marke oder Serie, z. B. XROS 4">

                {% if manufacturers|length %}
                    <label class="visually-hidden" for="rz-manual-manu">Hersteller</label>
                    <select class="form-select" id="rz-manual-manu" name="hersteller">
                        <option value="">Alle Hersteller</option>
                        {% for manufacturer in manufacturers %}
                            <option value="{{ manufacturer.id }}"{% if manufacturer.id == manufacturerId %} selected{% endif %}>{{ manufacturer.translated.name }}</option>
                        {% endfor %}
                    </select>
                {% endif %}

                {% if types|length %}
                    <label class="visually-hidden" for="rz-manual-type">Art</label>
                    <select class="form-select" id="rz-manual-type" name="typ">
                        <option value="">Alle Arten</option>
                        {% for option in types %}
                            <option value="{{ option }}"{% if option == type %} selected{% endif %}>{{ option }}</option>
                        {% endfor %}
                    </select>
                {% endif %}

                <button class="btn btn-primary" type="submit">Suchen</button>
            </div>
            <p class="rz-manuals-count">{{ total }} Anleitung{{ total == 1 ? '' : 'en' }}{% if term %} für „{{ term }}“{% endif %}</p>
        </form>

        {% if manuals|length %}
            <ul class="rz-manuals-list">
                {% for manual in manuals %}
                    <li class="rz-manual">
                        <div class="rz-manual-body">
                            <h2 class="rz-manual-title">{{ manual.title }}</h2>
                            <p class="rz-manual-meta">
                                {% if manual.manufacturer %}<span>{{ manual.manufacturer.translated.name }}</span>{% endif %}
                                {% if manual.deviceName %}<span>{{ manual.deviceName }}</span>{% endif %}
                                {% if manual.seriesOption %}<span>Serie {{ manual.seriesOption.translated.name }}</span>{% endif %}
                                {% if manual.type %}<span>{{ manual.type }}</span>{% endif %}
                                {% if manual.version %}<span>Stand {{ manual.version }}</span>{% endif %}
                                {% if manual.media and manual.media.fileSize %}<span>{{ (manual.media.fileSize / 1024 / 1024)|number_format(1, ',', '.') }} MB</span>{% endif %}
                            </p>
                        </div>
                        <a class="btn btn-light rz-manual-download" href="{{ path('frontend.riccardo.manuals.download', { manualId: manual.id }) }}"
                           rel="nofollow" download>
                            {% sw_icon 'file-text' style { size: 'sm' } %} PDF öffnen
                        </a>
                    </li>
                {% endfor %}
            </ul>

            {% if pages > 1 %}
                <nav class="rz-manuals-pages" aria-label="Seiten">
                    {% for i in 1..pages %}
                        {% if i == pageNumber %}
                            <span class="rz-manuals-page is-active" aria-current="page">{{ i }}</span>
                        {% else %}
                            <a class="rz-manuals-page" href="{{ path('frontend.riccardo.manuals.page', { q: term, typ: type, hersteller: manufacturerId, p: i }) }}">{{ i }}</a>
                        {% endif %}
                    {% endfor %}
                </nav>
            {% endif %}
        {% else %}
            <div class="rz-manuals-empty">
                <p><strong>Zu dieser Suche haben wir keine Anleitung.</strong></p>
                <p>Schreib uns kurz, welches Gerät du hast – wir besorgen die Anleitung und stellen sie hier ein.
                    <a href="/hilfe">Zur Hilfe und Kontakt</a></p>
            </div>
        {% endif %}
    </div>
{% endblock %}