{% set styles = "background-image: url('images/V3.png');" %}
{% set online = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
{% set standby = load_data(url="https://gridproxy.grid.tf/stats?status=standby", required=false, format="json") %}
{% if online and standby %}

  {% set capacity = (online.totalHru + standby.totalHru + online.totalSru + standby.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
  {% set nodes = online.nodes + standby.nodes %}
  {% set countries = online.countries %}
  {% set cores = online.totalCru + standby.totalCru %}
  
{% endif %}

{% if online and standby %}
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
    <div class="relative lg:max-w-6xl 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-4 lg:gap-8">
                

                <!-- capacity -->
            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                    <img class="mx-auto p-4" src="images/V3-08.png" width="150" alt="">
                <div class="leading-none font-extrabold text-3xl">
                    {{ capacity | round(precision=2) }}PB
                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
                </div>
            </div>
                

                <!-- Nodes -->
            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                    <img class="mx-auto p-4" src="images/V3-09.png" width="150" alt="">
                <div class="leading-none font-extrabold text-3xl">
                    {{ nodes }}
                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
                </div>
            </div>
                
                

                <!-- countries -->
            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                    <img class="mx-auto p-4" src="images/V3-10.png" width="150" alt="">
                <div class="leading-none font-extrabold text-3xl">
                    {{ countries }}
                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
                </div>
            </div>

              <!-- cores -->
            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
                   <img class="mx-auto p-4" src="images/V3-11.png" width="150" alt="">
                <div class="leading-none font-extrabold text-3xl">
                {{ cores | num_format }}
                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
                </div>
            </div>

 
            </div>
            

            <button class="my-8"><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore
                    ThreeFold Grid Capacity</a></button>
        </div>
    </div>
</section>
{% endif %}
<style>
    dd {
        display: inline-block;
        margin: auto;
        border-radius: 50%;
        line-height: 100px;
    }

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

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