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

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

    <meta property="og:title" content="Argus - Watch your bot">
    <meta property="og:site_name" content="Profile - 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/profile.css" rel="stylesheet">
</head>
<body>
    <div class="loader"></div>

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

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

    <main>
        <div class="section">
            <h2>Your Profile</h2>
            <div class="profileBox" style="flex-direction: row;">
                <div class="top">
                    <%- user.avatar ? `<img src="https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png">` : `<img src="/img/nopp_icon.svg">` %>
                    <div class="names">
                        <h2><%= user.global_name %></h2>
                        <span class="username"><%= user.username %> | <%= user.id %></span>
                    </div>
                </div>
                <div class="badges">
                    <%if (userDoc.badges.includes("admin")) {%>
                        <div class="tooltip badge">
                            <img src="/assets/img/roles/admin.png">
                            <span class="tooltiptext">Admin</span>
                        </div>
                    <%}%>
                    <%if (userDoc.badges.includes("dev")) {%>
                        <div class="tooltip badge">
                            <img src="/assets/img/roles/dev.png">
                            <span class="tooltiptext">Developer</span>
                        </div>
                    <%}%>
                    <%if (userDoc.badges.includes("mod")) {%>
                        <div class="tooltip badge">
                            <img src="/assets/img/roles/mod.png">
                            <span class="tooltiptext">Moderator</span>
                        </div>
                    <%}%>
                    <% if (userDoc.vipuntil > new Date().getTime()) {%>
                        <div class="tooltip badge">
                            <img src="/assets/img/premium.png">
                            <span class="tooltiptext">Premium Member</span>
                        </div>
                    <%}%>
                </div>
            </div>

            <% if (userDoc.vipuntil > new Date().getTime()) {%>
                <div class="profileBox" 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>
                    <a class="manageSubscriptionBtn" href="/managepremium">Manage Subscription</a>
                </div>
            <%} else {%>
                <div class="profileBox" 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>
                    <a class="manageSubscriptionBtn subscribe" href="/managepremium">Subscribe</a>
                </div>
            <%}%>

            <div class="profileBox">
                <div class="bank">
                    <h3>Argus Points</h3>

                    <div class="subBox" style="margin-bottom: 15px;">
                        <h4>Balance</h4>
                        <div class="money">
                            <img title="Argus Points" src="/assets/img/token.png">
                            <span><%= userDoc.points.toLocaleString('en-US').replaceAll(',', ' ') %></span>
                        </div>
                    </div>

                    <div class="subBox">
                        <h4>Gain Points</h4>
                        <div class="getPointsBox">
                            <div class="left">
                                <span>Daily Vote</span>
                                <span>+ 1 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                            </div>
                            <button type="button" onclick="claimReward('daily')"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" 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 stroke="#fefefe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5m-6 0 7.5-7.5M15 3h6v6"></path> </g></svg></button>
                        </div>
                        <% if (userDoc.claimedRewardDiscord === true) {%>
                            <div class="getPointsBox done">
                                <div class="left">
                                    <span>Join the Discord Server</span>
                                    <span>+ 10 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                                </div>
                                <button type="button" onclick="openInNewTab('/discord')"><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></button>
                            </div>
                        <%} else {%>
                            <div class="getPointsBox" id="reward-discord">
                                <div class="left">
                                    <span>Join the Discord Server</span>
                                    <span>+ 10 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                                </div>
                                <button type="button" onclick="claimReward('discord')"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" 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 stroke="#fefefe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5m-6 0 7.5-7.5M15 3h6v6"></path> </g></svg></button>
                            </div>
                        <%}%>
                        <% if (userDoc.claimedRewardTwitter === true) {%>
                            <div class="getPointsBox done">
                                <div class="left">
                                    <span>Follow us on Twitter</span>
                                    <span>+ 5 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                                </div>
                                <button type="button" onclick="openInNewTab('/twitter')"><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></button>
                            </div>
                        <%} else {%>
                            <div class="getPointsBox" id="reward-twitter">
                                <div class="left">
                                    <span>Follow us on Twitter</span>
                                    <span>+ 5 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                                </div>
                                <button type="button" onclick="claimReward('twitter')"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" 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 stroke="#fefefe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5m-6 0 7.5-7.5M15 3h6v6"></path> </g></svg></button>
                            </div>
                        <%}%>
                        <% if (userDoc.claimedRewardInstagram === true) {%>
                            <div class="getPointsBox done">
                                <div class="left">
                                    <span>Follow us on Instagram</span>
                                    <span>+ 5 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                                </div>
                                <button type="button" onclick="openInNewTab('/instagram')"><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></button>
                            </div>
                        <%} else {%>
                            <div class="getPointsBox" id="reward-instagram">
                                <div class="left">
                                    <span>Follow us on Instagram</span>
                                    <span>+ 5 000 <img title="Argus Points" src="/assets/img/token.png" class="pointsImg"></span>
                                </div>
                                <button type="button" onclick="claimReward('instagram')"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" 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 stroke="#fefefe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5m-6 0 7.5-7.5M15 3h6v6"></path> </g></svg></button>
                            </div>
                        <%}%>
                    </div>
                </div>
            </div>
        </div>
    </main>

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

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