extends base.pug

block title 
    title {{server['server_name']}} | {{site_name}}

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

block content 
    .container.shadow-lg
        .card-header.bg-danger.bg-gradient.text-light.mx-auto#serverName {{server['server_name']}}
        .card-body 
            .info
                img.rounded-pill.border.border-5.border-danger(src="{{server['icon_url']}}", alt="")
                
                .info-column.mx-auto
                    a.btn.btn-success(href="{{discord['invite']}}" target="_blank") Join {{server['server_name']}} ({{discord['approximate_member_count']}})
                    .card-body.bg-primary.bg-gradient.rounded.mx-auto
                        a.btn-warning.btn.rounded Members: {{human.format_number(discord['approximate_member_count'])}}
                        a.btn-warning.btn.rounded Emojis: {{len(discord['emojis'])}}
                        a.btn-warning.btn.rounded Roles: {{len(discord['roles'])}}
                        a.btn-warning.btn.rounded Boost Tier: {{discord['premium_tier']}} ({{discord['premium_subscription_count']}} Boosts)
            p.renderMarkdown.
                {% for line in server['description'].split('\n') %}
                
                {{line.replace(">", "").replace("\\", "")}}

                {% endfor %}


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

            const md = window.markdownit();

            const elements = document.getElementsByClassName("renderMarkdown");

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

        })