extends base.pug

block title 
    title Home | {{site_name}}

block links 
    link(rel="stylesheet", href="{{url_for('static', filename='styles/index.css')}}")

block content 

    .servers
        | {% for server in servers %}

        .card.shadow-lg(style="width: 18rem; margin:5px;")
            img.card-img-top(src="{{server['icon_url']}}")
            .card-body
                .card-header.bg-danger.bg-gradient.text-light(style="margin-bottom:5px;")
                    strong {{server['server_name']}}
                p.card-text {{server['description'][:100] + '...'}}
                
                a.btn.btn-outline-success.d-block.mx-auto(href="/server/{{server['_id']}}") View Server

        | {% endfor %}

block scripts 
    script.
        $(document).ready(() => {

            const md = window.markdownit();

            const elements = document.getElementsByClassName("card-text");

            for(var i = 0; i<elements.length; i++) {
                elements[i].innerHTML = md.render(elements[i].innerHTML);
            }

            $(".servers").animate({
                opacity: "100%"
            }, 600)

        })