{% load wagtailimages_tags %}

<div class="bg-[{{block.value.bgColor}}] text-[{{block.value.fgColor}}] py-4 md:py-10"
    style="background-color: {{block.value.bgColor}}; color:{{block.value.fgColor}}">
    {% if block.value.title %}

    <h1 class="text-3xl md:text-5xl text-center mb-4 font-bold">
        {{block.value.title}}
    </h1>
    {% endif %}
    {% for content in block.value.content %}
    <div class="{% if content.block_type == 'category' %} pass {% else %} px-4 {% endif %}">
        {% if content.block_type == 'heading' %}
        <h1 class="prose {{content.value.alignment}} {{content.value.size}}">
            {{content.value.title}}
        </h1>
        {% elif content.block_type == 'paragraph' %}
        <div class="{{content.value.alignment}} text-xl md:{{content.value.size}} {{content.value.line_space}} pb-4">
            {{content.value.text|safe}}
        </div>
        {% elif content.block_type == 'quote' %}
        <div class="flex flex-col">
            <span class="{{content.value.size}} flex justify-start z-0">

                <i class='bx bxs-quote-alt-left rotate-12'></i>
            </span>
            <div class="px-2 md:px-10 flex w-full">

                <p class="{{content.value.alignment}} text-xl md:{{content.value.size}} {{content.value.line_space}}">

                    {{content.value.quote}}
                </p>
            </div>
            <div class="{{content.value.size}} flex justify-end z-0">
                <i class='bx bxs-quote-alt-right -rotate-12'></i>
            </div>

        </div>
        {% elif content.block_type == 'category' %}
        <div class="flex">

            {% include 'components/home/catTile.html' with cat=content.value.category label=content.value.label %}
        </div>
        {% elif content.block_type == 'image' %}

        <div class="flex justify-center">
            <img src="{{content.value.file.url}}" alt="{{content.value.title}}">

        </div>
        {% elif content.block_type == 'tile_View' %}
        <div class="flex w-full flex-wrap justify-center">
            {% for tile in content.value.tile_View %}
            {% if content.value.tile_Type == 'Round' %}
            {% include 'components/home/roundTile.html' with tile=tile.value %}
            {% else %}
            {% include 'components/home/NormalTile.html' with tile=tile.value %}
            {% endif %}
            {% endfor %}
        </div>
        {% elif content.block_type == 'products' %}
        <div class="flex gap-2 justify-center flex-wrap">
            {% for prod in content.value %}
            <div>
                <a href="{{prod.value.get_default.specific.url}}" aria-label="{{prod.value.title}}">
                    <img src="{{prod.value.get_default.specific.search_image.file.url}}" alt="{{prod.value.title}}" loading="lazy"
                        class="h-20 md:h-40 w-auto border rounded-lg">
                </a>
            </div>

            {% endfor %}
        </div>
        {% elif content.block_type == 'news' %}
        <div class="flex w-full justify-center gap-4 flex-wrap">

            {% for news in content.value %}
            <div class="w-[330px] rounded-xl hover:font-bold tile relative overflow-hidden">
                <a href="{{news.value.url}}" aria-label="{{news.value.title}}">

                    {% image_url news.value.search_image "fill-330x180" as img %}
                    <img src="{{img}}" alt="news.value.search_image.title"
                        class="transition-transform duration-300 transform hover:scale-125 peer" />
                    <div
                        class="absolute inset-0  transition-opacity duration-300 peer-hover:opacity-0 pointer-events-none">
                    </div>
                    <div class="absolute bottom-0 bg-black opacity-75 left-0 text-white capitalize p-2">
                        <h1 class="leading-5 line-clamp-2">
                            {{news.value.title}}
                        </h1>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>

        {% else %}
        <div>

            {{content.block_type}}
        </div>
        {% endif %}
    </div>
    {% endfor %}

</div>