{% load cms_tags %}
{% load wagtailimages_tags %}

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

    <h1 class="text-5xl text-center mb-6">{{block.value.title}}</h1>
    {% endif %}
    {% for content in block.value.content %}
    <div class="container mx-auto">
        {% if content.block_type == 'heading' %}
        <h1 class="{{content.value.alignment}} {{content.value.size}}">
            {{content.value.title}}
        </h1>
        {% elif content.block_type == 'paragraph' %}
        <div class="{{content.value.alignment}} {{content.value.size}} {{content.value.line_space}} pb-4">
            {{content.value.text|safe}}
        </div>
        {% elif content.block_type == 'quote' %}
        <div class="{{content.value.alignment}} {{content.value.size}} {{content.value.line_space}}">
            &ldquo;
            {{content.value.quote}}
            &rdquo;
        </div>
        {% elif content.block_type == 'image' %}
        <img src="{{content.value.file.url}}" alt="{{content.value.title}}" loading="lazy" />
        {% elif content.block_type == 'show_services' %}
        <section class="bg-white">

            <div x-data="{}" x-init="$nextTick(() => {
                let ul = $refs.logos;
                ul.insertAdjacentHTML('afterend', ul.outerHTML);
                ul.nextSibling.setAttribute('aria-hidden', 'true');
            })"
                class="mt-2 w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]">
                <ul x-ref="logos"
                    class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
                    {% service_category as sc %}
                    {% for cat in sc %}

                    <a href="/service/{{cat.slug}}/" class="#servtile text-white rounded w-80 px-4 py-2 mx-4 shadow-xl">

                        <div class="flex gap-2 justify-start">
                            {% if cat.imgText %}
                            <span class="text-5xl">
                                {{cat.imgText|safe}}
                            </span>
                            {% else %}
                            {% image cat.img fill-80x80 loading="lazy" %}
                            {% endif %}
                            <h1 class="text-xl mt-4 text-center mt-1 break-words text-orange-400">
                                {{cat.title}}
                            </h1>
                        </div>
                        <div class="mt-2 line-clamp-3 text-black">
                            {{cat.desc | safe}}
                            <br />
                        </div>
                        <div class="mt-4 flex gap-2 text-black w-fit">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em"
                                viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                                <path
                                    d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z" />
                            </svg>
                            <span class="-mt-1">

                                More ...
                            </span>

                        </div>

                    </a>

                    {% endfor %}

                </ul>
            </div>
        </section>
        {% else %}
        <div>

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

</div>