<div class="col">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">#(service["name"])</h3>
            <div class="card-options">
                <span class="tag #if(service["url"]): btn-loading #endif">
                Status
                <span id="#(service["name"])Status" class="tag-addon">Unavailable</span>
                </span>
            </div>
        </div>
        <div class="card-body">
            #(service["description"])
        </div>
        #if(service["url"]):
        <div class="card-footer">
            URL: <a href="#(service["url"])">#(service["url"])</a>
        </div>
        #endif
    </div>
    #if(service["url"]):
    <script>
        fullURL = '#(service["url"])'
        var url = fullURL.replace("https://", "")
        url = url.replace("http://", "")
        var request = new XMLHttpRequest()
        request.open('GET', "/status/" + url, true)
        request.onload = function () {
            var data = JSON.parse(this.response)
            if (data.down === "true" || parseInt(data.code) > 500 && parseInt(data.code) < 600 ) {
                document.getElementById('#(service["name"])Status').classList.add("tag-danger")
                document.getElementById('#(service["name"])Status').parentElement.classList.remove("btn-loading")
                document.getElementById('#(service["name"])Status').innerHTML = "Offline"
            } else {
                document.getElementById('#(service["name"])Status').classList.add("tag-success")
                document.getElementById('#(service["name"])Status').parentElement.classList.remove("btn-loading")
                document.getElementById('#(service["name"])Status').innerHTML = "Online"
            }
        }
        request.send()
    </script>
    #endif
</div>