<html>

<head>
    <%- include('./partials/head'); %>
</head>

<body>
    <%- include('./partials/navbar'); %>
    <div class="hero-body">
        
                <div class="w-full py-10">
                    <div class="container mx-auto px-6 flex items-start justify-center">
                        <div class="w-full my-6">
                            <dh-component>
                                <!-- Card code block start -->
                                <div aria-label="cards" class="botcard bg-white dark:bg-gray-800 shadow rounded">
                                    <div class="relative">
                                        <img tabindex="0"  class="focus:outline-none h-56 shadow rounded-t w-full object-cover object-center" src="https://tuk-cdn.s3.amazonaws.com/assets/components/grid_cards/gc_29.png" alt="mountains cover" />
                                        <div class="inset-0 m-auto w-24 h-24 absolute bottom-0 -mb-12 xl:ml-10 rounded border-2 shadow border-white">
                                            <img tabindex="0"  class="focus:outline-none w-full h-full overflow-hidden object-cover rounded" src="<%= boti.avatar %>" alt="person" />
                                        </div>
                                    </div>
                                    <div class="px-5 xl:px-10 pb-10">
                                        <div class="pt-3 xl:pt-5 flex flex-col xl:flex-row items-start xl:items-center justify-between">
                                            <div class="xl:pr-16 w-full xl:w-2/3">
                                                <div class="text-center xl:text-left mb-3 xl:mb-0 flex flex-col xl:flex-row items-center justify-between xl:justify-start">
                                                  <a tabindex="0" class=" focus:outline-none focus:outline-none">  <h2 class="navtitle mb-3 xl:mb-0 xl:mr-4 text-2xl  font-medium tracking-normal"><%= boti.name %></h2></a>
                                                    <p  tabindex="0" class="focus:outline-none text-sm bg-indigo-700 dark:bg-indigo-600 text-white px-5 py-1 font-normal rounded-full">Prefixo: <%= boti.prefix %></p>
                                                </div>
                                                <p tabindex="0" class="focus:outline-none text-center xl:text-left mt-2 text-sm tracking-normal leading-5"><%= boti.descc %></p>
                                            </div>
                                            <div class="xl:px-10 xl:border-l xl:border-r w-full py-5 flex items-start justify-center xl:w-1/3">
                                                <div class="mr-6 xl:mr-10">
                                                    <h2 tabindex="0" class="focus:outline-none font-bold text-xl xl:text-2xl leading-6 mb-2 text-center"><%= boti.stats.servers || 0 %></h2>
                                                   <a tabindex="0" class=" focus:outline-none"> <p class=" text-sm xl:text-xl leading-5">Servidores</p></a>
                                                </div>
                                                <div class="mr-6 xl:mr-10">
                                                    <h2 tabindex="0" class="focus:outline-none font-bold text-xl xl:text-2xl leading-6 mb-2 text-center"><%= boti.stats.users || 0 %></h2>
                                                   <a tabindex="0" class=" focus:outline-none"> <p class=" text-sm xl:text-xl leading-5">Usu√°rios</p></a>
                                                </div>
                                                <div>
                                                    <h2 tabindex="0" class="focus:outline-none font-bold text-xl xl:text-2xl leading-6 mb-2 text-center"><%= boti.stats.shards || 0 %></h2>
                                                   <a tabindex="0" class=" focus:outline-none"> <p class=" text-sm xl:text-xl leading-5">Shards</p></a>
                                                </div>
                                            </div>
                                            <div class="w-full xl:w-2/3 flex-col md:flex-row justify-center xl:justify-end flex md:pl-6">
                                                <div class="field has-addons">
                                                    <p class="control">
                                                        <a href="/bots/<%= boti.bot %>/add">
                                                            <button class="button is-success">
                                                                <span class="icon is-small">
                                                                    <i class="fas fa-plus"></i>
                                                                </span>
                                                                <span>Adicionar</span>
                                                            </button>
                                                        </a>
                                                    </p>
                                                    <p class="control">
                                                        <a href="/bots/<%= boti.bot %>/discord">
                                                            <button class="button is-link">
                                                                <span class="icon is-small">
                                                                    <i class="fas fa-paper-plane"></i>
                                                                </span>
                                                                <span>Suporte</span>
                                                            </button>
                                                        </a>
                                                    </p>
                                                    <p class="control">
                                                        <a href="/bots/<%= boti.bot %>/website">
                                                            <button class="button is-link">
                                                                <span class="icon is-small">
                                                                    <i class="fas fa-window-restore"></i>
                                                                </span>
                                                                <span>Website</span>
                                                            </button>
                                                        </a>
                                                    </p>
                                                    <p class="control">
                                                        <a href="/bots/<%= boti.bot %>/vote">
                                                            <button class="button is-link">
                                                                <span class="icon is-small">
                                                                    <i class="fas fa-vote-yea"></i>
                                                                </span>
                                                                <span>Votar</span>
                                                            </button>
                                                        </a>
                                                    </p>
                                                    <% if (botOwner) { %>
                                                    <p class="control">
                                                        <a href="/bots/<%= boti.bot %>/edit">
                                                            <button class="button is-warning">
                                                                <span class="icon is-small">
                                                                    <i class="fas fa-clipboard-list"></i>
                                                                </span>
                                                                <span>Editar</span>
                                                            </button>
                                                        </a>
                                                    </p>
                                                    <% } %>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Card code block end -->
                            </dh-component>
                        </div>
                    </div>
                </div>

        <div class="box">
            <div class="card-body">
                <div id="bot-description" style="white-space:pre-wrap;"><%- botDesc %></div>
            </div>
        </div>
    </div>
    <%- include('./partials/footer'); %>
</body>

</html>