{% load wagtailimages_tags %}

<div class="bg-[{{block.value.bgColor}}] text-[{{block.value.fgColor}}] py-4 md:py-10 {{block.value.fontType}}"
    style="{% if block.value.fontType %} font-family: {{block.value.fontType}}; {% endif %} 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 %} container mx-auto {% 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 w-full flex-wrap justify-center items-center gap-3 px-4">
            {% for cat in content.value.content %}
            {% include 'components/SubcategoryTile.html' with cat=cat.value %}
            {% endfor %}
        </div>

        {% else %}
        <div>

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

</div>