{% load wagtailimages_tags %}

<div class="bg-[{{block.value.bgColor}}] py-6 md:py-0 text-[{{block.value.fgColor}}]"
    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 ">{{block.value.title}}</h1>
    {% endif %}

    <!-- Row Start -->
    <div class="flex w-full grid md:grid-cols-{{block.value.content|length}} gap-6 ">

        {% for block in block.value.content %}
        <!-- Column Start -->
        <div class="w-full ">
            {% for block in block.value %}
            <div class="">
                {% if block.block_type == 'company' %}
                <div class="mb-4 roboto-regular">
                    {% for com in block.value %}
                    <div class="flex gap-2 items-start ">
                        {% if com.value.ciLogoText %}
                        <div class="text-xl mt-2">
                            {{com.value.ciLogoText|safe }}
                        </div>
                        {% elif com.value.ciLogo %}
                        <img src="{{com.value.ciLogo.file.url}}" alt="{{com.value.ciLogo.title}}" loading="lazy"
                            class="w-5 h-5 mt-3" />
                        {% else %}
                        {{com.value.ciType}}
                        {% endif %}
                        <div>

                            {% for val in com.value.ciBody %}
                            {% if val.block_type == 'text' %}
                            <p class="mt-2">{{val}}</p>
                            {% elif val.block_type == 'paragraph' %}
                            <p class="mt-2 text-justify">{{val|safe}}</p>
                            {% endif %}
                            {% endfor %}
                        </div>

                    </div>
                    {% endfor %}
                </div>
                {% elif block.block_type == 'heading' %}
                <h1 class="{{block.value.alignment}} {{block.value.size}} mb-2">
                    {{block.value.title}}
                </h1>
                {% elif block.block_type == 'highlight_heading' %}

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

                    {{block.value.title}}
                </h1>
                
                {% elif block.block_type == 'category' %}
                <ul>

                    {% for cat in block.value.content %}
                    <li class="{{block.value.line_space}} hover:font-bold hover:underline text-xl">

                        <a href="{{cat.value.url}}">
                            {{cat.value.title}}
                        </a>
                    </li>
                    {% endfor %}
                </ul>

                {% elif block.block_type == 'paragraph' %}
                <div class="{{block.value.alignment}} {{block.value.size}} {{block.value.line_space}}">
                    {{block.value.text|safe}}
                </div>
                {% elif block.block_type == 'quote' %}
                <div class="{{block.value.alignment}} {{block.value.size}} {{block.value.line_space}}">
                    &ldquo;
                    {{block.value.quote}}
                    &rdquo;
                </div>
                {% elif block.block_type == 'show_enq_form' %}
                {% if request.path == '/' %}

                {% include 'components/EnqForm/quickEnq.html' %}
                {% else %}

                {% include 'components/EnqForm/contactPageEnq.html' %}

                {% endif %}

                {% elif block.block_type == 'sub_row' %}
                {% include 'components/PageBlock/SubrowBlock.html' %}

                {% elif block.block_type == 'policy' %}
                <div>
                    {% if block.value.title %}
                    <a href="/{{block.value.slug}}/">

                        {{block.value.title}}
                    </a>
                    {% else %}
                    <a href="/{{block.value.type.slug}}/">
                        {{block.value.type}}
                    </a>
                    {% endif %}
                </div>
                {% elif block.block_type == 'social' %}

                <div class="grid">
                    {% for sc in block.value %}
                    <a href="{{sc.value.soUrl}}" target="_blank"
                        class="text-3xl flex items-center text-[{{sc.value.fgColor}}]">

                        {{sc.value.soLogoText|safe}}
                        <span class="text-lg text-[{{sc.value.TextfgColor}}]">
                            {% if sc.value.soTitle %}
                            {{sc.value.soTitle}}
                            {% endif %}
                            {% if sc.value.soTitle and sc.value.soUserId %}
                            /
                            {% endif %}
                            {% if sc.value.soUserId %}

                            {{sc.value.soUserId}}
                            {% endif %}

                        </span>
                    </a>

                    {% endfor %}
                </div>

                {% elif block.block_type == 'page' %}
                <a href="{{block.value.url}}">

                    {{block.value.title}}
                </a>
                {% elif block.block_type == 'image' %}
                <div class="flex justify-center">
                    <img src="{{block.value.file.url}}" alt="{{block.value.title}}">

                </div>
                {% elif block.block_type == 'tile' %}
                <a href="{{block.value.url}}" class="relative flex w-full justify-center text-gray-900 border rounded-2xl shadow-2xl  ">
            
                    <img src="{{block.value.specific.get_thumb_image.file.url}}" alt="{{block.value.title}}" class="absolute relative h-60 w-auto mb-8">
                  
                    <div class="absolute bottom-0 inset  flex w-full items-center justify-center rounded-b-2xl">
                        <div class="bg-gray-800 w-full text-center text-white pb-3 pt-4 rounded-b-2xl">

                            <h2 class="font-bold line-clamp-2 px-4">{{block.value.title}}</h2>
                        </div>
                    </div>
                </a>
        

                {% else %}

                <div>

                    {{block.block_type}}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        <!-- Column END -->


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