{% extends "web_layout.html" %}
{% load wagtailimages_tags %}

{% block title %} : {{page.title}}{% endblock %}

{% block extra_css %}
<meta name="description" content="{{page.search_description}}">
<style>
    .gradient {
        background: linear-gradient(90deg, #F48F1A 0%, #daae51 100%);
    }

    .servtile {
        background-image: linear-gradient(to right, #F2911E, #e6951b, #DBAC4E, #d2743e);
        /* background-image: linear-gradient(to right bottom, #e5a038, #c27342, #925043, #5a3638, #231f20); */
    }
</style>

{% endblock %}

{% block content %}

<div class="leading-normal tracking-normal gradient min-h-screen" style="font-family: 'Source Sans Pro', sans-serif;">

    {% for block in page.body %}
    <div>

        {% if block.block_type == 'section' %}
        {% include 'Components/WebPageBlocks/sectionBlock.html' %}



        {% elif block.block_type == 'row' %}
        {% include 'Components/WebPageBlocks/rowBlock.html' %}

        {% else %}
        <div>

            <h1>

                {{block.block_type}}
            </h1>
        </div>
        {% endif %}
    </div>
    {% endfor %}

    {% if request.path == '/services/' %}
    {% include 'components/services.html' with services=page.get_children %}
    {% endif %}




</div>
{% if page.showFooter %}
{% include 'components/footer.html' %}
{% endif %}
{% endblock %}



{% block script %}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>
    function serviceDetail(id, title) {
        console.log("service=", id, title);

        const ID = id;
        $.ajax(
            {
                type: "GET",
                url: "/api/v2/pages/" + ID,
                success: function (data) {
                    console.log("Data=", data);
                    document.getElementById('serviceDetail').classList.remove('hidden')
                    let html_data = `
                    <div class="grid grid-cols-2 container mx-auto py-16 gap-6 shadow-2xl rounded px-4">
                            <div class="left-text">
                                <h4 class="text-2xl font-bold text-blue-400">${data.title}</h4>
                                <p>${data.shortDesc}</p>
                                
                            </div>
                            <div class="flex justify-center">
                                
                                <img src="${data.titleImg.meta.download_url}" alt="${data.titleImg.title}" class="h-96">
                            </div>
                    </div>`






                    $("#serviceDetail").html(html_data);

                }
            })



    }
</script>

{% endblock script %}