{% extends "base-site.html" %}

{% block title %} Dashboard {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="row">
        <div class="col-md-12">
            <div class="card card-profile">
                <div class="card-body">
                    <h6 class="card-category text-gray">Dashboard</h6>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-11">
                                <h5>Welcome to the interactive dashboard, where you can control your bot via this easy-to-use interface.  Choose a server that you have elevated permissions in below.  If you don't see your server below, check to make sure that your server's owner has set roles with <code>[p]dashboard roles create</code></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="serverrow">
        <div class="col-md-12">
            <h1>Loading servers...</h1>
        </div>
    </div>
    
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script>
    // Since the serer loading could take who knows how long, we'll load in JS so it says "Loading..."" in the page
    $(document).ready(function(){
        var xhr = new XMLHttpRequest();
        var url = "/api/getservers"
        xhr.open("GET", url, true)
        xhr.setRequestHeader("Content-Type", "application/json")
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) { return }
            var json = JSON.parse(xhr.responseText)
            if (json.status === 0) {
                $("#serverrow").html(`<div class="col-md-12"><h1>${json["message"]}</h1></div>`)
            } else {
                if (json.data.length === 0) {
                    $("#serverrow").html('<div class="col-md-12"><h1>You\'re not in any servers with elevated permissions!</h1></div>')
                } else {
                    $("#serverrow").html("")
                    for (let g of json.data) {
                        $("#serverrow").append(`
                            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12" style="margin-bottom: 50px">
                                <a href="/guild/${g.id}">
                                    <div class="card h-100" onmouseover="playGif(this)" onmouseout="stopGif(this)">
                                        <img class="card-img-top" src="${g.icon}png" alt="Card image cap" data-src-url="${g.icon}" data-is-animated=${g.animated}>
                                        <div class="card-body">
                                            <h5 class="card-title">${g.name}</h5>
                                            <p class="card-text">Owner: ${g.owner}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        `)
                    }
                }
            }
        }
        try {
            xhr.send()
        } catch(error) {
            console.log(error)
        }
    })

    function playGif(elm) {
        var img = $(elm).find("img")
        if (img.attr('data-is-animated') === "true") {
            img.attr("src", `${img.attr("data-src-url")}gif`)
        }
    }
    function stopGif(elm) {
        var img = $(elm).find("img")
        if (img.attr('data-is-animated') === "true") {
            img.attr("src", `${img.attr("data-src-url")}png`)
        }
    }
</script>
{% endblock javascripts %}