{% extends 'template.html' %}

{% block title %}Home{% endblock %}

{% block header %}
<script>

    $.get("/v1/terrareg/analytics/global/stats_summary", function(data, status) {
        $('#namespace-count').html(data.namespaces);
        $('#module-count').html(data.modules);
        $('#version-count').html(data.module_versions);
        $('#download-count').html(data.downloads);
    });

    $(document).ready(function () {
        checkInitialSetup();

        $.get("/v1/terrareg/analytics/global/most_recently_published_module_version", function(data, status) {
            createSearchResultCard('most-recent-module-version', 'module', data);
        });
        $.get("/v1/terrareg/analytics/global/most_downloaded_module_provider_this_week", function(data, status) {
            createSearchResultCard('most-downloaded-this-week', 'module', data);
        });
    });
    
</script>
{% endblock %}

{% block content %}

<nav class="level" style="margin-top: 20px; margin-bottom: 80px;">
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Namespaces</p>
            <p id="namespace-count" class="title"></p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Modules</p>
            <p id="module-count" class="title"></p>
        </div>
    </div>
    <p class="level-item has-text-centered">
        <h1 id="title" class="title is-1">{{ terrareg_application_name }}</h1>
    </p>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Module Versions</p>
            <p id="version-count" class="title"></p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Downloads</p>
            <p id="download-count" class="title"></p>
        </div>
    </div>
</nav>
<div class="columns is-centered">
    <div id="most-recent-module-version" class="column is-one-third-widescreen is-half-desktop">
        <h4 class="title is-4">Most recently published</h4>
    </div>
    <div id="most-downloaded-this-week" class="column is-one-third-widescreen is-half-desktop">
        <h4 class="title is-4">Most downloaded this week</h4>
    </div>
</div>
{% endblock %}
