{% load wagtailimages_tags %}
{% load cms_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 {% endif %}">
        {% if content.block_type == 'heading' %}
        <h1 class="font-bold opacity-90 {{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|add_formating}}
        </div>
        {% elif content.block_type == 'image' %}
        <div class="mt-8 mb-2">
            {{content}}
        </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 == 'code' %}
        {{content}}

        {% 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>
        {% elif content.block_type == 'accordion' %}
        {% for acc in content.value %}
        <div class="z-0 group outline-none accordion-section border-t" tabindex="{{forloop.counter}}">
            <div
                class="group  flex justify-between px-4 py-3 items-center  transition ease duration-500 cursor-pointer pr-10 relative">
                <div class="group-focus:text-white transition ease duration-500">
                    {{acc.value.title.title}}
                </div>
                <div
                    class="h-8 w-8 border bg-gray-900 txt-orange border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2">
                    <i class='bx bx-chevron-down'></i>
                </div>
            </div>
            <div class="group-focus:max-h-screen max-h-0 px-4 overflow-hidden ease duration-500">
                <p class="p-2 text-gray-800 text-justify">
                    {{acc.value.detail.desc}}
                </p>
            </div>
        </div>
        {% endfor %}
        {% elif content.block_type == 'product' %}

        

        <div class="mt-4 mb-4 w-full {% if content.value.template == 'right' %} flex flex-row-reverse {% else %} flex {% endif %}">

            <div class="w-full md:w-[40%] md:px-4">

                <img src="{{content.value.product.search_image.file.url}}" alt="{{content.value.product.title}}"
                    loading="lazy" class="w-auto max-h-96 border rounded-lg">
            </div>
            <div class="w-full md:w-[60%]   md:px-4">
                <h1 class="text-xl font-bold mb-2">{{content.value.product.title}}</h1>

                <table class="text-left mb-4 rounded">
                    <tr>
                        <th>Product Type</th>
                        <td>
                            {{content.value.product.get_parent.title}}
                        </td>
                    </tr>
                    {% if content.value.product.prFeature.detail %}
                    <tr>
                        <th>
                            Feature
                        </th>
                        <td>
                            {{content.value.product.prFeature.detail}}

                        </td>
                    </tr>
                    {% endif %}
                    {% if content.value.product.prFeature.thickness %}
                    <tr>
                        <th>
                            Thickness
                        </th>
                        <td>
                            {{content.value.product.prFeature.thickness}}

                        </td>
                    </tr>
                    {% endif %}
                    {% if content.value.product.prFeature.size %}
                    <tr>
                        <th>
                            Size
                        </th>
                        <td>
                            {{content.value.product.prFeature.size}}

                        </td>
                    </tr>
                    {% endif %}

                    {% if content.value.product.product_matTypes.all %}
                    <tr>
                        <th>Material</th>
                        <td>{{content.value.product.product_matTypes.first.matType.material}}</td>
                    </tr>
                    <tr>
                        <th>Material Type</th>
                        <td>
                            {% for item in content.value.product.product_matTypes.all %}
                            {{item.matType.matType}}
                            {% endfor %}
                        </td>
                    </tr>

                    {% endif %}

                    {% if content.value.product.product_features.all %}
                    {% for val in content.value.product.product_features.all %}
                    <tr>
                        <th>{{val.attribute}}</th>
                        <td>{{val.value}}</td>
                    </tr>
                    {% endfor %}
                    {% endif %}



                </table>

                <a href="{{content.value.product.url}}" class="bg-orange rounded px-4 py-2 text-lg text-white hover:text-gray-900">Buy Now</a>

            </div>

        </div>

        {% else %}
        <div>

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

</div>