{% load wagtailimages_tags %}

<div class="bg-[{{block.value.bgColor}}] text-[{{block.value.fgColor}}] py-4 md:py-6"
    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="my-2 mt-[{{content.value.margin.top}}px] mb-[{{content.value.margin.bottom}}px] {% if content.block_type == 'category' %} pass {% else %} {% endif %}">
        {% if content.block_type == 'heading' %}
        <h1 class="prose {{content.value.alignment}} {{content.value.size}} font-bold"
            id="{{content.value.title|slugify}}">
            {{content.value.title}}
        </h1>
        {% elif content.block_type == 'highlight_heading' %}

        <h1 class="prose {{content.value.alignment}} {{content.value.size}} bg-[{{content.value.bg}}] {% if content.value.bg %} px-2 {% endif %} text-[{{content.value.fg}}]  font-bold"
            id="{{content.value.title|slugify}}">
            {{content.value.title}}
        </h1>
        {% elif content.block_type == 'image_heading' %}
        <h1 class="prose {{content.value.alignment}} {{content.value.size}} font-bold flex items-center gap-2"
            id="{{content.value.title|slugify}}">
            {{content.value.icon|safe}}
            {% image content.value.image height-20 %}

            {{content.value.title}}
        </h1>

        {% elif content.block_type == 'line_break' %}
        {% elif content.block_type == 'embed' %}
        {{content}}
        <br />
        {% elif content.block_type == 'cta' %}
        <a href="{% if content.value.link %}{{content.value.link}}{% else %}{{content.value.page.url}}{% endif %}"
            class="bg-[{{content.value.bgColor}}] text-[{{content.value.fgColor}}] hover:bg-[{{content.value.hoverBgColor}}] hover:text-[{{content.value.hoverFgColor}}]  px-4 py-2 rounded-xl">
            {% if content.value.title %}
            {{content.value.title}}
            {% else %}
            {{content.value.page.title}}
            {% endif %}
        </a>
        {% elif content.block_type == 'hr_line' %}
        <div class="mt-[{{block.value.margin.top}}px] mb-[{{block.value.margin.bottom}}px] h-[{{block.value.thickness}}px] w-[{{block.value.width}}px] {% if block.value.color %} bg-[{{block.value.color}}] {% elif block.value.double_color %} bg-gradient-to-r from-[{{block.value.double_color.oneColor}}] from-50%  to-[{{block.value.double_color.twoColor}}] to-50% {% endif %}"
            style="{{block.value.gradient}}"></div>
        {% 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}} {{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.url}}">
                    <img src="{{prod.value.get_thumb_image.file.url}}" alt="{{prod.title}}" loading="lazy"
                        class="h-20 md:h-40 w-auto border rounded-lg">
                </a>
            </div>

            {% endfor %}
        </div>
        {% elif content.block_type == 'code' %}
        {{content}}

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

</div>