custom/plugins/GGiantsStoreAPI/src/Resources/views/storefront/page/flavors/index.html.twig line 1

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

{% block base_content %}
    <h1 class="mb-3">Unsere Eissorten</h1>
    <p class="mb-5">
        Hier findest du eine Liste unserer Sorten mit ihren Allergenen und Unverträglichkeiten.
    </p>
    <div class="flavors-grid">
        {% for flavor in flavors %}
            <div class="flavors-grid-item">
                <div class="flavors-grid-item-image">
                    <img src="{{ flavor.media.url }}" alt="{{ flavor.name }}"/>
                </div>
                <div class="flavors-grid-item-body">

                    <h4>{{ flavor.name }}</h4>


                    <span class="text-sm">
                    {% if flavor.intolerances|filter(v => v.description != "")|length > 0 %}
                        <b>Allergene:</b>
                        {% for intolerance in flavor.intolerances|filter(v => v.description != "")|sort((a,b) => a.description <=> b.description) %}
                            {{ intolerance.description }}{% if not loop.last  %},{% endif %}
                        {% endfor %}
                    {% endif %}

                    </span>
                    <div class="intolerances">
                        {% if flavor.intolerances|filter(v => v.name == "Glutenfrei")|length > 0 %}
                            <img class="intolerances-icon" src="/media/81/b7/6b/1674731950/Gluten Free.png" title="Glutenfrei" alt="Glutenfrei">
                        {% endif %}
                        {% if flavor.intolerances|filter(v => v.name == "Vegan")|length > 0 %}
                            <img class="intolerances-icon" src="/media/e9/b5/37/1666165274/organic-food.png" title="Vegan" alt="Vegan">
                        {% endif %}
                        {% if flavor.intolerances|filter(v => v.name == "Laktosefrei")|length > 0 %}
                            <img class="intolerances-icon" src="/media/f4/c2/24/1674731965/Lactose%20Free.png" title="Laktosefrei" alt="Laktosefrei">
                        {% endif %}
                    </div>
                </div>

            </div>
        {% endfor %}
    </div>

    <style>
        .text-sm{
            font-size: 75%;
        }
        .intolerances-icon{
            height: 30px;
        }
        .flavors-grid{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .flavors-grid-item{
            display: flex;
            flex-direction: row;
            width: 500px;
            margin-bottom: 2rem;
        }
        .flavors-grid-item .flavors-grid-item-image img{
            width: 150px;
            margin-right: 2rem;
        }
    </style>


{% endblock %}