{% set styles = "background-image: url('images/grid_map.png');" %}
{% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
{% set capacity = data.hru + data.sru / 1000 %}
{% set nodes = data.onlinenodes %}
{% set countries = data.countries %}
{% set cores = data.cru %}

<section class="px-2 h-auto bg-center bg-cover bg-no-repeat" style="{{styles}}">
    <div class="flex flex-wrap lg:p-12 text-center -mx-auto">
        <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
            {{body | markdown | safe }}

            <div class="my-10 grid lg:grid-cols-3 lg:gap-8">
                <div class="..."></div>

                <!-- capacity -->
                <div class="leading-none font-extrabold text-5xl">
                    {{ capacity / 1000000 | round(precision=2) }}PB
                    <span class="block text-3xl uppercase">capacity</span>
                </div>
                <div class="..."></div>

                <!-- Nodes -->
                <div class="
                mx-auto
                rounded-full
                h-32
                w-32
                lg:h-60 lg:w-60
                inline-flex
                items-center
                justify-center
                bg-green
                my-4
              ">
                    <div class="leading-none font-extrabold md:text-6xl">
                        {{ nodes }}
                        <span class="block md:text-2xl uppercase">nodes</span>
                    </div>
                </div>
                <div class="hidden md:block"></div>

                <!-- countries -->
                <div class="
                mx-auto
                rounded-full
                h-32
                w-32
                lg:h-60 lg:w-60
                inline-flex
                items-center
                justify-center
                bg-pink
              ">
                    <div class="leading-none font-extrabold md:text-6xl">
                        {{ countries }}
                        <span class="block md:text-2xl uppercase">countries</span>
                    </div>
                </div>
            </div>
            <div class="..."></div>

            <!-- cores -->
            <div class="leading-none font-extrabold text-5xl">
                {{ cores | num_format }}
                <span class="block text-2xl uppercase">cores</span>
            </div>
        </div>
    </div>
    <div class="my-4 mx-auto text-center">
        <a href="/" target="_blank" class="
            inline-block
            bg-white
            lg:text-lg
            learn-button
            hover:bg-gray-400
            px-12
            py-1
            mr-5
            border-2
            shadow
            border-black
          ">button</a>
    </div>
</section>

<style>
    dd {
        display: inline-block;
        margin: auto;
        border-radius: 50%;
        line-height: 100px;
    }

    .bg-green {
        background-color: #70dfc9;
    }

    .bg-pink {
        background-color: #ea1ff7;
    }
</style>