<!-- START NAV -->

<nav class="navbar">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                Megaweb
            </a>
            <span class="navbar-burger burger" data-target="navMenu">
                <span></span>
                <span></span>
                <span></span>
            </span>
        </div>
        <div id="navMenu" class="navbar-menu">
            <div class="navbar-end">

                <a class="navbar-item" href="/">Présentation</a>
                <a class="navbar-item is-active" href="/dashboard">Dashboard</a>
                <a class="navbar-item" href="/invite">Ajouter le bot</a>
                <a class="navbar-item" href="https://github.com/andronedev/megaweb-bot">Github</a>
                <a class="navbar-item" href="/support">Discord</a>

            </div>
        </div>
    </div>
</nav>
<!-- END NAV -->
<div class="container">
    <div class="columns">
        <div class="column is-3">
            <article class="panel is-info">
                <p class="panel-heading">
                    <% if (guild) { %>
                        <span class="icon">
                <img src="https://cdn.discordapp.com/icons/<%= guild.id %>/<%= guild.icon %>.webp?size=128" />
              </span>
                        <%= guild.name %>
                            <% } else{ %>Vos serveur
                                <% } %>
                </p>
                <% guilds.forEach((guild)=> { %>

                    <a class="panel-block <% if(guild.id == currentid){ %>has-text-weight-bold<% } %>" <% if(guild.botin==true) { %>href="/dashboard/<% } else { %>target=" _blank" href="/invite?id=<% } %><%= guild.id %>
                  ">
                    <span class="panel-icon is-rounded mr-2">
                      <img src="https://cdn.discordapp.com/icons/<%= guild.id %>/<%= guild.icon %>.webp?size=128"
                        onerror="this.onerror=null;this.src='https:\/\/cdn.discordapp.com/embed/avatars/0.png';" /></span>
                    <%= guild.name %>
            </a>
                    <%})%>
            </article>
        </div>
        <div class="column is-9">


            <section class="hero is-info welcome is-small" style=" border-radius: 5px;">
                <div class="hero-body">
                    <div class="container">
                        <h1 class="title">Hello,
                            <%= user.username %>
                        </h1>
                        <h2 class="subtitle">Bienvenue !</h2>
                    </div>
                </div>
            </section>
            <% if(guild != null){ %>
                <div id="app">
                    <div class="columns mt-1">

                        <div class="column is-6">
                            <div class="card events-card">
                                <header class="card-header">
                                    <p class="card-header-title">Mes moniteurs</p>
                                    <a href="#" class="card-header-icon" aria-label="more options">
                                        <span class="icon">
                        <button @click="getmonits()" class="button is-info"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                        
                      </span>
                                    </a>
                                </header>
                                <div class="card-table">
                                    <div class="content">
                                        <div class="card">
                                            <tr class="home">

                                                <div class="table-container">
                                                    <table class="table">

                                                        <thead>
                                                            <tr>
                                                                <th><abbr title="Nom">Nom</abbr></th>
                                                                <th><abbr title="URL">URL</abbr></th>
                                                                <th><abbr title="Interval">Intervalle</abbr></th>
                                                                <th><abbr title="link">Lien</abbr></th>
                                                                <th><abbr title="Actions">Actions</abbr></th>

                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            <tr v-for="item in monits" :key="item.id">

                                                                <th>{{ item.name }}</th>
                                                                <th><a target="_blank" v-bind:href="item.url">{{item.url}}</a></th>
                                                                <th>{{ item.interval }} min</th>
                                                                <th><a target="_blank" v-bind:href="'https://discord.com/channels/'+item.guildid+'/'+ item.channelid +'/'+ item.messageid">Voir</a></th>
                                                                <th><button @click="removemonit(item['_id'])" class="button is-danger">Supprimer</button></th>
                                                            </tr>
                                                        </tbody>
                                                    </table>



                                                </div>

                                            </tr>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                        <div class="column is-6">
                            <div class="card">
                                <header class="card-header">
                                    <p class="card-header-title">Ajouter un moniteur</p>
                                    <a href="#" class="card-header-icon" aria-label="more options">
                                        <span class="icon">
                        <i class="fa fa-angle-down" aria-hidden="true"></i>
                      </span>
                                    </a>
                                </header>
                                <div class="card-content">
                                    <div class="content">

                                        <div class="select is-medium is-fullwidth">
                                            <select id="channelid">
                                        <option>
                                            Selectionner un salon
                                        </option>
                                        <% if(guild.channels){ %>
                                           
                                        <% guild.channels.forEach((channel)=> { %>
                                            <option value="<%= channel.id %>">
                                            <%= channel.name %>
                                            </option>
                                            <%})%>
                                        <% } else { %>
                                            <option>
                                                Aucun salon disponible
                                            </option>
                                        <% } %>
                                        </select>
                                        </div>

                                        <hr>
                                        <input required id="name" class="input" type="text" placeholder="Nom">
                                        <input required id="url" class="input" type="url" placeholder="URL du site à surveiller">
                                        <input required id="interval" class="input" type="number" placeholder="Intervalle de mise a jour (en minutes)" min="5">
                                        <button @click="addmonit()" class="button is-primary is-fullwidth mt-1">Ajouter</button>
                                        <div v-show="success" class="notification is-primary mt-1">
                                            Le moniteur a été ajouté avec succès !
                                        </div>
                                    </div>
                                </div>
                            </div>




                        </div>
                    </div>
                </div>
                <script>
                    var app = new Vue({
                        el: '#app',
                        data: {
                            monits: [],
                            guildid: "<%= guild.id %>",
                            success: false
                        },
                        methods: {
                            addmonit() {
                                this.success = false
                                fetch("/addmonit", {
                                    "headers": {
                                        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",

                                        "content-type": "application/x-www-form-urlencoded",
                                    },

                                    "body": `channelid=${document.getElementById('channelid').value}&name=${document.getElementById('name').value}&url=${document.getElementById('url').value}&interval=${document.getElementById('interval').value}`,
                                    "method": "POST",
                                    "mode": "cors",
                                    "credentials": "include"
                                }).then(rep => rep.json()).then(json => {
                                    if (json.success) {
                                        this.success = true
                                        this.getmonits()


                                    }
                                })
                            },
                            getmonits() {
                                fetch("/getmonits?id=" + this.guildid, {
                                    "headers": {
                                        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
                                    },
                                    "method": "GET",
                                    "mode": "cors",
                                    "credentials": "include"
                                }).then(rep => rep.json()).then(json => {
                                    if (json.success) {
                                        this.monits = json.monits
                                    }
                                });
                            },

                            removemonit(id) {
                                fetch("/removemonit", {
                                    "headers": {
                                        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
                                        "content-type": "application/x-www-form-urlencoded",
                                    },

                                    "body": `id=${id}`,
                                    "method": "POST",
                                    "mode": "cors",
                                    "credentials": "include"
                                }).then(rep => rep.json()).then(json => {
                                    if (json.success) {
                                        this.getmonits()
                                    }
                                })
                            }

                        },
                        mounted: function () {
                            this.getmonits()
                        }
                    })
                </script>
                <% } else { %>
                <div class="box mt-1">
                        Merci de selectionner un serveur pour commencer
                </div>
               <% } %>
        </div>
    </div>
</div>