<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= data.client.user.username %> | Admin Panel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dashboardPanel_route/css/main.css">
    <link rel="shortcut icon" href="<%= data.client.user.displayAvatarURL() || 'https://discordapp.com/assets/322c936a8c8be1b803cd94861bdfa868.png' %>"/>
    <meta name="theme-color" content="#7289DA" />
    <meta name="description" content="<%= data.settings.introText %>">
</head>

<body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 navHeader">
        <h5 class="my-0 mr-md-auto headerBrand"><%= data.client.user.username %></h5>
        <nav class="my-2 my-md-0 mr-md-3 headerBrandNavButtons">
            <% for (i = 0; i < data.settings.navItems.length; i++) { %>
            <a class="p-2" href="<%= data.settings.navItems[i].link %>"><%= data.settings.navItems[i].name %></a>
            <% } %>
        </nav>
    </div>
    <section class="jumbotron text-center lightBackground">
        <div class="container">
            <img style="border-radius: 50%; width: 100px; height: 100px;"
                src="<%= data.client.user.displayAvatarURL() || 'https://discordapp.com/assets/322c936a8c8be1b803cd94861bdfa868.png' %>"
                alt="">
            <h1 class="jumbotron-heading" style="color: #7289DA;"><%= data.client.user.username %></h1>
            <p class="lead "><%= data.settings.introText %></p>
            <p>
                <a href="<%= data.settings.inviteLink %>" class="btn btn-primary my-2"
                    style="background-color: #7289DA; width: 132px;">Invite Bot</a>
                <a href="<%= data.settings.supportServer %>" class="btn btn-primary my-2"
                    style="background-color: #7289DA; width: 132px;">Support Server</a>
            </p>
        </div>
    </section>
    <div style="height: 150px; overflow: hidden; margin-top: -100px;">
        <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
            <path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z"
                style="stroke: none;fill: #23272A;"></path>
        </svg>
    </div>
    <section class="darkBackground">
        <div class="row" style="margin-top: 0; max-width: 95%; margin-left: auto; margin-right: auto;">
            <div class="col-2">
                <div class="list-group" id="list-tab" role="tablist">
                    <%

                    let sections = [];
                    data.mods.forEach(mod => {
                        if (!sections.includes(mod.sectionID)) {
                            sections.push(mod.sectionID); %>
                            <a class="list-group-item list-group-item-action <%  if (sections.length == 1) {  %> active <% } %>" id="list-<%= mod.sectionID %>" data-toggle="list" href="#<%= mod.sectionID %>" style="background-color: #2C2F33; color: white;"><%= mod.section %>
                            </a>
                        <% };
                    });

                    data.extensions.forEach(extension => {
                        if (!sections.includes(extension.section)) { %>
                            <a class="list-group-item list-group-item-action" id="list-<%= extension.sectionID %>" data-toggle="list" href="#<%= extension.sectionID %>" role="tab" aria-controls="webPanel" style="background-color: #2C2F33; color: white;"><%= extension.section %></a>
                        <% }
                    }) %>
                    <a class="list-group-item list-group-item-action" id="list-webPanel" data-toggle="list"
                        href="#webPanel" role="tab" aria-controls="webPanel"
                        style="background-color: #2C2F33; color: white;">Web Panel
                    </a>
                </div>
            </div>

            <div class="col-10">
                <div class="tab-content" id="nav-tabContent">
                    <% 
                    let addedSectionsContent = [];
                    sections.forEach(sectionData => {
                        if (!addedSectionsContent.includes(sectionData)) {
                            addedSectionsContent.push(sectionData);
                            let sectionMods = [];
                            data.mods.forEach(mod => {
                                if (sectionData == mod.sectionID) {
                                    sectionMods.push(mod);
                                };
                            }); %>
                            <div class="tab-pane fade show <%  if (addedSectionsContent.length == 1) {  %> active <% } %>" id="<%= sectionData %>" role="tabpanel" aria-labelledby="list-<%= sectionData %>">
                                <table class="table table-striped table-dark">
                                    <thead style="background-color: #2C2F33;">
                                        <tr style="background-color: #23272A;">
                                            <th>Action</th>
                                            <th>Description</th>
                                            <th>Version</th>
                                            <th>Author</th>
                                            <th style="text-align: right">Execute Command</th>
                                        </tr>
                                        <% for (i = 0; i < sectionMods.length; i++) { %>
                                        <tr>
                                            <td><%= sectionMods[i].name %></td>
                                            <td><%= sectionMods[i].description %></td>
                                            <td><%= sectionMods[i].version %></td>
                                            <td><%= sectionMods[i].author %></td>
                                            <% if (sectionMods[i].webFile) { %>
                                                <td style="text-align: right"><button onclick="$('#customHTMLModal<%= sectionMods[i].sectionID %>').modal('show')" class="btn btn-danger">Execute</button></td>
                                            <% } else { %>
                                                <form action="/api/admin/execute/<%= sectionMods[i].name %>"  method="POST" onsubmit="">
                                                    <td style="text-align: right"><button type="submit" class="btn btn-danger">Execute</button></td>
                                                </form>
                                            <% } %>
                                        </tr>
                                        <% } %>
                                    </thead>
                                </table>
                            </div>
                            <%
                        }
                    }) %>

                    <% data.extensions.forEach(extension => { %>
                        <div class="tab-pane fade show" id="<%= extension.sectionID %>" role="tabpanel" aria-labelledby="list-<%= extension.sectionID %>">
                            <%- include(data.path.join(data.dirname, "../../extensions", extension.name.toLowerCase().replace(/ /g,"_"), extension.webFile), {data: data}); %>
                        </div>
                    <% }) %>

                    <div class="tab-pane fade show" id="webPanel" role="tabpanel" aria-labelledby="list-webPanel">
                        <form action="/api/admin/web" method="POST" class="needs-validation">
                            <div class="form-group">
                                <label>Intro Text</label>
                                <div style="padding-bottom: 10px;"></div>
                                <textarea class="form-control" name="introText" rows="4"
                                    style="background-color: #23272A; border: 1.5px solid #7289DA; color: white;"
                                    required><%= data.settings.introText %></textarea>
                            </div>

                            <div class="form-group">
                                Footer Text
                                <div style="padding-bottom: 10px;"></div>
                                <textarea class="form-control" name="footerText" rows="4"
                                    style="background-color: #23272A; border: 1.5px solid #7289DA; color: white;"
                                    required><%= data.settings.introText %></textarea>
                            </div>
                            <button type="submit" style="margin-top: -5px;" class="btn btn-primary">Save Settings</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 150px; overflow: hidden;">
            <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
                <path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z"
                    style="stroke: none;fill: #2C2F33;"></path>
            </svg>
        </div>
    </section>
    <section style="margin-top: -60px;">
        <footer class="page-footer font-small">
            <div class="container text-center text-md-left mt-5">
                <div class="row mt-3">
                    <h6 class="text-uppercase font-weight-bold featuresHeaderFooter"><%= data.client.user.username %></h6>
                    <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 100%;">
                    <p style="color: white; max-width: 900px;"><%= data.settings.footerText %></p>
                </div>
            </div>
        </footer>
    </section>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <% if (data.commandData) { %>
        <div class="modal show" id="commandExecutedModal" tabindex="-1" role="dialog" aria-labelledby="commandExecuted">
            <div class="modal-dialog" role="document">
                <div class="modal-content darkBackground">
                    <div class="modal-header" style="border-bottom:1px solid #7289DA;">
                        <h3 class="modal-title" style="color: #7289DA" id="commandExecuted">Command Executed</h3>
                    </div>
                    <div class="modal-body" style="border-bottom: none;">
                        <%= data.user.commandExecuted %>
                        <% data.user.commandExecuted = undefined; %>
                    </div>
                    <div class="modal-footer" style="border-top: none;">
                        <form action="/dashboard">
                            <button type="submit" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <% } %>

    <% data.mods.forEach(mod => { 
        if (!mod.webFile) return %>
        <div class="modal show" id="customHTMLModal<%= mod.sectionID %>" tabindex="-1" role="dialog" aria-labelledby="customHTML">
            <div class="modal-dialog" role="document" style="margin: auto; padding: 25px;">
                <div class="modal-content darkBackground">
                    <div class="modal-header" style="border-bottom:1px solid #7289DA;">
                        <h3 class="modal-title" style="color: #7289DA" id="customHTML"><%= mod.name %></h3>
                    </div>
                    <div class="modal-body" style="border-bottom: none;">
                        <form action="/api/admin/execute/<%= mod.name %>" method="POST">
                            <%- include(data.path.join(data.dirname, "../../mods", mod.name.toLowerCase().replace(/ /g,"_"), mod.webFile), {data: data}); %>
                    </div>
                    <div class="modal-footer" style="border-top: none;">
                        <button type="submit" class="btn btn-primary" style="background-color: red; border: none;">Execute</button>
                        </form>
                        <form action="/dashboard">
                            <button type="submit" class="btn btn-primary" style="border: none;"
                                data-dismiss="modal">Close</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    <% }) %>

    <% if (data.commandData) { %>
    <script>
        $('#commandExecutedModal').modal('show')
    </script>
    <% } %>
</body>


</html>