<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Premium - Argus Dashboard</title>
    <meta name="author" content="KartoffelChips">
    <meta name="description" content="Argus - Watch Discord bots on your server.">
    <%- include("../partials/icons.ejs") %>

    <meta property="og:title" content="Argus - Watch your bot">
    <meta property="og:site_name" content="Premium - Argus Dashboard">
    <meta property="og:url" content="https://argus-bot.com/">
    <meta property="og:description" content="Argus - Watch Discord bots on your server.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="/assets/img/ogimage.jpg">

    <link href="/assets/css/dashboard/main.css" rel="stylesheet">
    <link href="/assets/css/dashboard/premium.css" rel="stylesheet">
</head>
<body>
    <div class="loader"></div>

    <%- include("../partials/messageBox.ejs", {}) %>

    <%- include("../partials/nav.ejs", { user: user }) %>

    <main>
        <div class="section">
            <h2>Premium</h2>
            <% if (userDoc.vipuntil > new Date().getTime()) {%>
                <div class="premiumBox" style="display: flex; align-items: center; flex-direction: row;">
                    <div class="rotateBox" style="height: 90px;">
                        <div class = "square"><img src="/assets/img/premium_small.png"></div>
                    </div>
                    <div class="premium">
                        <h3>Argus Premium</h3>
                        <div class="statusbox success">
                            <svg fill="#fefefe" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>checkmark2</title> <path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z"></path> </g></svg>
                            <span>Subscribed until <%= new Date(userDoc.vipuntil).toLocaleTimeString([], {minute: "2-digit", hour: "2-digit", day: "numeric", month: "2-digit", year: "numeric"}); %></span>
                        </div>
                    </div>
                </div>
            <%} else {%>
                <div class="premiumBox" style="display: flex; align-items: center; flex-direction: row;">
                    <div class="greyImg" style="height: 90px;">
                        <img src="/assets/img/premium_small.png" style="height: 100%;">
                    </div>
                    <div class="premium">
                        <h3>Argus Premium</h3>
                        <div class="statusbox danger">
                            <svg fill="#fefefe" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M18.8,16l5.5-5.5c0.8-0.8,0.8-2,0-2.8l0,0C24,7.3,23.5,7,23,7c-0.5,0-1,0.2-1.4,0.6L16,13.2l-5.5-5.5 c-0.8-0.8-2.1-0.8-2.8,0C7.3,8,7,8.5,7,9.1s0.2,1,0.6,1.4l5.5,5.5l-5.5,5.5C7.3,21.9,7,22.4,7,23c0,0.5,0.2,1,0.6,1.4 C8,24.8,8.5,25,9,25c0.5,0,1-0.2,1.4-0.6l5.5-5.5l5.5,5.5c0.8,0.8,2.1,0.8,2.8,0c0.8-0.8,0.8-2.1,0-2.8L18.8,16z"></path> </g></svg>
                            <span>No active subscription</span>
                        </div>
                    </div>
                </div>
            <%}%>

            <div class="premiumBox buyBox">
                <div class="plan">
                    <h3>1 Month</h3>
                    <span style="color: var(--success);">0% Discount</span>
                    <button type="button" onclick="buyPremium('1');">40.000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></button>
                </div>
                <div class="plan">
                    <h3>3 Months</h3>
                    <span style="color: var(--success);">8% Discount</span>
                    <button type="button" onclick="buyPremium('3');">110.000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></button>
                </div>
                <div class="plan">
                    <h3>1 Year</h3>
                    <span style="color: var(--success);">16% Discount</span>
                    <button type="button" onclick="buyPremium('12');">400.000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></button>
                </div>
            </div>

            <div class="premiumBox featuresBox">
                <table id="userTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th>FREE</th>
                            <th>PREMIUM</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        <tr>
                            <td>Watchable Bots</td>
                            <td><svg class="infinitysymbol" fill="#fefefe" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe" stroke-width="0.00008"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2 0c-1.31 0-2 1.01-2 2s.69 2 2 2c.79 0 1.42-.56 2-1.22.58.66 1.19 1.22 2 1.22 1.31 0 2-1.01 2-2s-.69-2-2-2c-.81 0-1.42.56-2 1.22-.58-.66-1.21-1.22-2-1.22zm0 1c.42 0 .88.47 1.34 1-.46.53-.92 1-1.34 1-.74 0-1-.54-1-1 0-.46.26-1 1-1zm4 0c.74 0 1 .54 1 1 0 .46-.26 1-1 1-.43 0-.89-.47-1.34-1 .46-.53.91-1 1.34-1z" transform="translate(0 2)"></path> </g></svg></td>
                            <td><svg class="infinitysymbol" fill="#fefefe" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe" stroke-width="0.00008"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M2 0c-1.31 0-2 1.01-2 2s.69 2 2 2c.79 0 1.42-.56 2-1.22.58.66 1.19 1.22 2 1.22 1.31 0 2-1.01 2-2s-.69-2-2-2c-.81 0-1.42.56-2 1.22-.58-.66-1.21-1.22-2-1.22zm0 1c.42 0 .88.47 1.34 1-.46.53-.92 1-1.34 1-.74 0-1-.54-1-1 0-.46.26-1 1-1zm4 0c.74 0 1 .54 1 1 0 .46-.26 1-1 1-.43 0-.89-.47-1.34-1 .46-.53.91-1 1.34-1z" transform="translate(0 2)"></path> </g></svg></td>
                        </tr>
                        <tr>
                            <td>Channel Notifications</td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                        </tr>
                        <tr>
                            <td>DM Notifications</td>
                            <td>10 Users</td>
                            <td>100 Users</td>
                        </tr>
                        <tr>
                            <td>E-Mail Notifications</td>
                            <td>5 E-Mails</td>
                            <td>15 E-Mails</td>
                        </tr>
                        <tr>
                            <td>Embed Updates</td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                        </tr>
                        <tr>
                            <td>Uptime Logs*</td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                        </tr>
                        <tr>
                            <td>Bot Webstatus*</td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                        </tr>
                        <tr>
                            <td>Bot Vanity URL*</td>
                            <td class="red"><svg fill="#fefefe" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M18.8,16l5.5-5.5c0.8-0.8,0.8-2,0-2.8l0,0C24,7.3,23.5,7,23,7c-0.5,0-1,0.2-1.4,0.6L16,13.2l-5.5-5.5 c-0.8-0.8-2.1-0.8-2.8,0C7.3,8,7,8.5,7,9.1s0.2,1,0.6,1.4l5.5,5.5l-5.5,5.5C7.3,21.9,7,22.4,7,23c0,0.5,0.2,1,0.6,1.4 C8,24.8,8.5,25,9,25c0.5,0,1-0.2,1.4-0.6l5.5-5.5l5.5,5.5c0.8,0.8,2.1,0.8,2.8,0c0.8-0.8,0.8-2.1,0-2.8L18.8,16z"></path> </g></svg></td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                        </tr>
                        <tr>
                            <td>Bot Page Customization*</td>
                            <td class="red"><svg fill="#fefefe" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M18.8,16l5.5-5.5c0.8-0.8,0.8-2,0-2.8l0,0C24,7.3,23.5,7,23,7c-0.5,0-1,0.2-1.4,0.6L16,13.2l-5.5-5.5 c-0.8-0.8-2.1-0.8-2.8,0C7.3,8,7,8.5,7,9.1s0.2,1,0.6,1.4l5.5,5.5l-5.5,5.5C7.3,21.9,7,22.4,7,23c0,0.5,0.2,1,0.6,1.4 C8,24.8,8.5,25,9,25c0.5,0,1-0.2,1.4-0.6l5.5-5.5l5.5,5.5c0.8,0.8,2.1,0.8,2.8,0c0.8-0.8,0.8-2.1,0-2.8L18.8,16z"></path> </g></svg></td>
                            <td class="green-check"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></td>
                        </tr>
                    </tbody>
                </table>
                <span class="reminder">* Requires a <a href="#">certified bot</a></span>
            </div>
        </div>
    </main>

    <%- include("../partials/footer.ejs", {}) %>

    <script src="/assets/js/assets.js"></script>
    <script src="/assets/js/premium.js"></script>
</body>
</html>