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

{% block base_content %}
    {% set job = career.job %}
    <div class="container rk-page rk-detail">
        <nav class="rk-back" aria-label="Zurück">
            <a href="{{ path('frontend.riccardo.karriere') }}#stellen">← Alle offenen Stellen</a>
        </nav>

        {% if not job.active %}
            <div class="rk-closed" role="status">
                <strong>Diese Stelle ist nicht mehr ausgeschrieben.</strong>
                <a href="{{ path('frontend.riccardo.karriere') }}#stellen">Zu den aktuellen Stellen</a>
            </div>
        {% endif %}

        <header class="rk-hero rk-hero--job">
            <div class="rk-hero-copy">
                <p class="rk-kicker">{{ job.areaName }}</p>
                <h1>{{ job.role }}</h1>
                <p class="rk-job-facts">
                    <span>{% sw_include '@RiccardoKarriere/storefront/component/karriere/icon.html.twig' with { name: 'pin' } %}{{ job.location ?? 'Mehrere Standorte' }}</span>
                    {% if job.workTimes is not empty %}
                        <span>{% sw_include '@RiccardoKarriere/storefront/component/karriere/icon.html.twig' with { name: 'clock' } %}{{ job.workTimes|join(' · ') }}</span>
                    {% endif %}
                </p>
            </div>
        </header>

        <div class="rk-detail-grid">
            <article class="rk-detail-body">
                {% for section in job.sections %}
                    <section class="rk-block">
                        <h2>{{ section.title }}</h2>
                        {% if section.text %}<p>{{ section.text }}</p>{% endif %}
                        {% if section.items is not empty %}
                            <ul class="rk-list">
                                {% for item in section.items %}<li>{{ item }}</li>{% endfor %}
                            </ul>
                        {% endif %}
                    </section>
                {% else %}
                    <section class="rk-block"><p>{{ job.teaser }}</p></section>
                {% endfor %}
            </article>

            {% if job.active %}
                <aside class="rk-apply" aria-label="Bewerben">
                    <div class="rk-apply-card">
                        <strong class="rk-apply-title">Interesse?</strong>
                        <p>Bewirb dich direkt über unser Bewerbungsportal – mit Lebenslauf und Zeugnissen.</p>
                        <a class="btn btn-primary btn-lg rk-apply-btn" href="{{ job.applyUrl }}" target="_blank" rel="noopener">Jetzt bewerben</a>
                        {% if job.contact %}<p class="rk-contact">Dein Kontakt: <strong>{{ job.contact }}</strong></p>{% endif %}
                        <p class="rk-note">Die Bewerbung läuft über HRworks, unser Bewerbungsportal. Es öffnet sich in einem neuen Tab.</p>
                    </div>
                </aside>
                <div class="rk-apply-bar">
                    <a class="btn btn-primary btn-lg" href="{{ job.applyUrl }}" target="_blank" rel="noopener">Jetzt bewerben</a>
                </div>
            {% endif %}
        </div>

        {% if career.others is not empty %}
            <section class="rk-section" aria-labelledby="rk-others-title">
                <div class="rk-section-head">
                    <h2 id="rk-others-title" class="rk-h2">Weitere Stellen · {{ job.areaName }}</h2>
                </div>
                <ul class="rk-jobs">
                    {% for other in career.others %}
                        <li>{% sw_include '@RiccardoKarriere/storefront/component/karriere/job-card.html.twig' with { job: other } %}</li>
                    {% endfor %}
                </ul>
            </section>
        {% endif %}

        <section class="rk-initiative rk-initiative--slim">
            <div>
                <h2>Nicht ganz das Richtige?</h2>
                <p>Bewirb dich initiativ – wir sehen uns jede Bewerbung an.</p>
            </div>
            <div class="rk-initiative-actions">
                <a class="btn btn-light btn-lg" href="{{ career.initiativeUrl }}">Initiativ bewerben</a>
            </div>
        </section>

        {% if career.jsonLd %}
            <script type="application/ld+json">{{ career.jsonLd|raw }}</script>
        {% endif %}
    </div>
{% endblock %}