{% 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>{command}</code>").format(command="[p]dashboard roles create"))|safe }}
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card card-profile">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <form class="form-inline d-flex justify-content-center md-form form-sm mt-0">
                            <i class="fas fa-search" aria-hidden="true"></i>
                            <input class="form-control form-control-sm ml-3 w-75" id="guildsearch" type="text"
                                placeholder="{{ _('Search') }}" aria-label="Search">
                        </form>
                    </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 src="https://cdn.jsdelivr.net/npm/fuse.js@6.0.4"></script>
<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 = "{{ url_for('api_blueprint.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 {
                    var base_guild_url = "{{ url_for('dashboard_blueprint.guild', guild='123456789123456789') }}"
                    $("#serverrow").html("")
                    for (let g of json.data) {
                        var current_guild_url = base_guild_url.replace("123456789123456789", g.id)
                        $("#serverrow").append(`
                            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 guildcard" style="margin-bottom: 50px">
                                <a href="${current_guild_url}">
                                    <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`)
        }
    }
    $(document).ready(function () {
        $("#guildsearch").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $('.guildcard').filter(function () {
                var name = $(this).find('h5').text().toLowerCase()
                var list = [name]
                var options = {
                    threshold: '0.3'
                }
                var fuse = new Fuse(list, options)
                $(this).toggle(fuse.search(value).length === 1 || value === "")
            });
        });
    });
</script>
{% endblock javascripts %}