<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <%- include('../Partials/head'); %>
</head>
<nav>
    <%- include('../Partials/navbar'); %>
</nav>

<body>
    <br>
    <center>
        <div class="container">
            <div class="columns">
                <div class="column">
                    <section class="hero is-danger welcome is-small">
                        <div class="hero-body">
                            <div class="container">
                                <h1 class="title">
                                    Olá, <%= user.username %>.
                                </h1>
                                <h2 class="subtitle">
                                    Você está gerenciando o servidor <strong><%= guild.name %></strong>!
                                </h2>
                            </div>
                        </div>
                    </section>
                    <br>
                    <section class="info-tiles">
                        <div class="tile is-ancestor has-text-centered">
                            <div class="tile is-parent">
                                <article class="tile is-child box">
                                    <p class="title"><%= guild.memberCount %></p>
                                    <p class="subtitle">Membros</p>
                                </article>
                            </div>
                            <div class="tile is-parent">
                                <article class="tile is-child box">
                                    <p class="title"><%= guild.channels.size %></p>
                                    <p class="subtitle">Canais</p>
                                </article>
                            </div>
                            <div class="tile is-parent">
                                <article class="tile is-child box">
                                    <p class="title"><%= guild.roles.size %></p>
                                    <p class="subtitle">Cargos</p>
                                </article>
                            </div>
                        </div>
                        <div class="tabs">
                            <ul>
                              <li><a href="/dashboard/<%= guild.id %>">Geral</a></li>
                              <li><a href="/dashboard/<%= guild.id %>/mod">Automod</a></li>
                              <li class="is-active"><a href="/dashboard/<%= guild.id %>/premium">Premium</a></li>
                            </ul>
                          </div>
                          <h1 class="title is-3">
                            Plano Atual: <%= premium.plan %>
                        </h1>
                          <form action="/api/dashboard/<%= guild.id %>/premium" method="post">
                            <div class="field">
                                <label for="keypremium" class="label">Key Premium</label>
                                <div class="control">
                                  <input class="input" id="keypremium" name="keypremium" type="text" placeholder="Insira sua key aqui!" autocomplete="off">
                                </div>
                              </div>

                              <div class="field is-grouped">
                                <div class="control">
                                    <button type="submit" class="button is-link">Ativar</button>
                                </div>
                                <div class="control">
                                    <button onclick="window.history.back()" class="button is-link is-light">Cancelar</button>
                                </div>
                            </div>
                          </form>
                    </section>
                </div>
            </div>
        </div>
    </center>
    <br>
    <footer class="footer">
        <%- include('../Partials/footer'); %>
    </footer>
</body>

</html>