{% set styles = "background-image: url('/images/ston_bg.png');" %}
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
{% if data %}
{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %}
{% set nodes = data.nodes %}
{% set countries = data.countries %}
{% endif %}
<style>
    .bg-map {
        background-color: #EAE8E3;
    }
</style>
<div class="bg-map pb-24">
    <div class="relative max-w-7xl mx-auto">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
            <div class=" overflow-hidden">
                <div class="px-2 py-16">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <img src="/images/node_icon.png"  width="65" alt="">
                        </div>
                        <div class="ml-5 w-0 flex-1 pt-3">
                            <dl>
                                <dd class="flex items-baseline mb-5 ">
                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
                                        {{ nodes }}
                                    </div>
                                </dd>
                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
                                    freeflow nodes <br />deployed
                                </dt>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" overflow-hidden bg-no-repeat bg-center	bg-contain	text-center" style="{{styles}}">
                <div class="px-2 py-16">
                    <div class="flex items-start">
                        <div class="ml-5 w-0 flex-1 pt-3">
                            <dl>
                                <dd class="flex items-baseline mb-5 ">
                                    <div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
                                        {{ countries }}
                                    </div>
                                </dd>
                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
                                    countries <br />involved
                                </dt>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <div class=" overflow-hidden">
                <div class="px-2 py-16">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <img src="/images/capacity_icon.png" width="65" alt="">
                        </div>
                        <div class="ml-5 w-0 flex-1 pt-3">
                            <dl>
                                <dd class="flex items-baseline mb-5 ">
                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
                                        {{ capacity | round() }}TB
                                    </div>
                                </dd>
                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
                                    capacity <br />generated
                                </dt>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>