{% extends 'speleoferata/base.html.twig' %}
{% block body %}

    {% for block in page.contentBlocks %}
        {% if block.template == 'speleoferata-header' %}
            <!-- Hero Section -->
            <section class="hero">
                <div class="">
                    <div class="row g-0">
                        <!-- Textová část -->
                        <div class="col-md-6 d-flex align-items-center text-section">
                            <div>
                                <h1 class="fw-bold display-4">{{ block.name }}</h1>
                                <div class="lead">
                                    {{ block.text|raw }}
                                </div>
                                <div class="d-flex gap-3 mt-4">
                                    {% if block.specialContentField('button') %}
                                        <a href="#buy-section" class="btn btn-primary btn-lg">{{ block.specialContentField('button') }}</a>
                                    {% endif %}
                                    {% if block.specialContentField('secondaryButton') %}
                                        <a href="{{ path('speleoferata_calendar_index') }}" class="btn btn-outline-light btn-lg">{{ block.specialContentField('secondaryButton') }}</a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <!-- Obrázková část -->
                        <div class="col-md-6 image-container">
                            <img src="https://s3.eu-central-1.amazonaws.com/speleoferata/prod/3f7292ee67ed4afdb2c016e9ddb45860.jpeg"
                                 alt="Speleoferata - via ferrata v jeskyni" class="hero-img">
                        </div>
                    </div>
                </div>
            </section>
        {% elseif block.template == 'speleoferata-voucher' %}
            <!-- Voucher Selection Section -->
            <section id="buy-section" class="my-5">
                <div class="container">
                    <div class="info-section">
                        <h2 class="section-title text-center">{{ block.name }}</h2>
                        {{ block.text|raw }}
                        <div class="row g-4">
                            {% for variant in product.variants %}
                                {% if variant.status < 3 %}
                                <div class="col-md-3">
                                    <div class="card variant-card text-center p-3">
                                        <div class="card-body">
                                            <h5 class="card-title">{{ variant.name }}</h5>
                                            <p class="card-text fw-bold">{{ variant.finalPrice|price_format }}</p>
                                            <a class="btn btn-primary" href="{{ path('speleoferata_business_cart_add', {'id': variant.id}) }}">Zakoupit</a>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <p class="text-center mt-4">
                            {{ block.specialContentField('secondaryText') }}
                        </p>
                    </div>
                </div>
            </section>
        {% elseif block.template == 'speleoferata-about' %}
            <!-- Detailed Information Section -->
            <section id="details-section" class="mb-5">
                <div class="container">
                    <div class="info-section">
                        <h3 class="section-title">{{ block.name }}</h3>
                        {{ block.text|raw }}
                    </div>
                </div>
            </section>
        {% elseif block.template == 'speleoferata-contact' %}
            <!-- Contact form section -->
            <section id="order-body" class="container mb-5">
                <div class="row">
                    <div class="col-sm-12 col-md-6">
                        <div class="card">
                            <h5 class="card-header text-white orange">Napište nám</h5>
                            <div class="card-body">
                                {% if htmlMessage %}
                                    <div class="text-center text-green">{{ htmlMessage }}</div>
                                    <div class="text-center mt-2"><a href="{{ path('speleoferata_contact') }}" class="btn btn-info">Poslat další</a></div>
                                {% else %}
                                    {{ form_start(form) }}
                                    <div class="row">
                                        <div class="col-md-6">{{ form_row(form.name) }}</div>
                                        <div class="col-md-6">{{ form_row(form.email) }}</div>
                                        <div class="col-md-12">{{ form_row(form.description) }}</div>
                                        <div class="col-md-12">
                                            {{ form_row(form.captcha) }}
                                            <button id="btn_submit" class="btn btn-primary mt-4">Odeslat</button>
                                        </div>
                                    </div>
                                    {{ form_end(form) }}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6">
                        <div class="card">
                            <h5 class="card-header text-white orange">Kontaktní informace</h5>
                            <div class="card-body">
                                <div>
                                    <div>
                                        Provozovna: Ostrov u Macochy 78, 679 14
                                    </div>
                                    <div class="mt-4">
                                        infolinka a hotline:  777 514 414
                                    </div>
                                    <div class="mt-4">
                                        Prosíme o respektování "rozumných" provozních hodin infolinky. O víkendech a ve večerních hodinách využívejte raději e-mail. Děkujeme
                                    </div>
                                    <div class="mt-4">
                                        email: info@speleoferata.cz
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        {% elseif block.template == 'speleoferata-photogallery' %}
            <!-- Gallery Section -->
            <section class="mb-5">
                <div class="container">
                    <h3 class="section-title text-center mb-4">{{ block.name }}</h3>
                    <div class="row g-3 gallery">
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/cd16fff92883e9f933ed1aed0119aa25.jpeg_small.jpeg"
                                 class="img-fluid rounded" alt="Galerie 1">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/c8c272e685f761e918ac5b5fdd4e53ea.jpeg"
                                 class="img-fluid rounded" alt="Galerie 2">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/2f3d8c5d733e94e4143bf0a0f9da5364.jpeg"
                                 class="img-fluid rounded" alt="Galerie 3">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://s3.eu-central-1.amazonaws.com/speleoferata/prod/c7024fa779c487fad31e0d288a723cdc.jpeg_small.jpeg"
                                 class="img-fluid rounded" alt="Galerie 4">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://s3.eu-central-1.amazonaws.com/speleoferata/prod/3aeda33decfabb46a7c0acfe1d0f7c26.jpeg"
                                 class="img-fluid rounded" alt="Galerie 5">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://s3.eu-central-1.amazonaws.com/speleoferata/prod/127dbcf4710615e8e9478252c2e864af.jpeg"
                                 class="img-fluid rounded" alt="Galerie 6">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://s3.eu-central-1.amazonaws.com/speleoferata/prod/bb1ca1b68975610767ae59752b2ec1a0.jpeg"
                                 class="img-fluid rounded" alt="Galerie 7">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/59eeafb7883280c3611457a391749d15.jpeg"
                                 class="img-fluid rounded" alt="Galerie 8">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/008a58314b88e5ddd7787b87f6bf60b6.jpeg"
                                 class="img-fluid rounded" alt="Galerie 9">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://s3.eu-central-1.amazonaws.com/speleoferata/prod/c9ba1730637fbb9f5ff2d7fa59d41e5f.jpeg"
                                 class="img-fluid rounded" alt="Galerie 10">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/db3aa224113aae5d0a7c1dc628cea69f.jpeg"
                                 class="img-fluid rounded" alt="Galerie 11">
                        </div>
                        <div class="col-6 col-sm-4 col-md-3">
                            <img src="https://speleoferata.s3.eu-central-1.amazonaws.com/prod/f5968c36f987a6893f3c56b7c6c08fdc.jpeg"
                                 class="img-fluid rounded" alt="Galerie 12">
                        </div>
                    </div>
                </div>
            </section>
        {% elseif block.template == 'speleoferata-footer' %}
            <!-- Footer -->
            <footer>
                <div class="container text-center">
                    <p class="mb-2">© 2025 Speleoferata s.r.o.</p>
                    <div>
                        <a href="{{ block.specialContentField('twitter') }}" class="text-white me-3"><i class="bi bi-twitter fs-4"></i></a>
                        <a href="{{ block.specialContentField('instagram') }}" class="text-white me-3"><i class="bi bi-instagram fs-4"></i></a>
                        <a href="{{ block.specialContentField('facebook') }}" class="text-white"><i class="bi bi-facebook fs-4"></i></a>
                    </div>
                    <div>
                        <a href="{{ path('speleoferata_policy') }}" class="text-white">Všeobecné obchodní podmínky</a>
                    </div>
                </div>
            </footer>
        {% endif %}
    {% endfor %}
{% endblock %}