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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mechnet Home</title>
    <link rel="stylesheet" href="Homeh.css">
    <link rel="icon" type="image/png" href="./Images/logo.png">
    <style>
        .tooltip {
            position: absolute;
            background: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
            font-size: 20px;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip.visible {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="loading">
        <div class="loader"></div>
    </div>
    <div id="content">
        <div class="navbar">
            <nav>
                <div class="SoftName">
                    <img src="./Images/logo.png" href="Home.html" alt="Mechnet Logo">
                    <a href="#" onclick="redirectToHomePage()" class="nav-link">Mechnet</a>
                </div>
                <div class="hamburger" id="hamburger">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <ul>
                    <li><a href="#" onclick="downloadFile()" style="color: white; text-decoration: none;"
                            onmouseover="this.style.color='rgb(131,128,128)'"
                            onmouseout="this.style.color='white'">Download
                            Software</a></li>
                    <li><a href="#" onclick="redirectToAdminPage()" id="manage-users-btn" style="display: none;">Manage
                            Users</a></li>
                    <li><a href="#" onclick="redirectToAccountPage()" style="color: white; text-decoration: none;"
                            onmouseover="this.style.color='rgb(131,128,128)'"
                            onmouseout="this.style.color='white'">Account
                            Settings</a></li>
                    <li><a href="#" onclick="redirectToDevicePage()" style="color: white; text-decoration: none;"
                            onmouseover="this.style.color='rgb(131,128,128)'"
                            onmouseout="this.style.color='white'">Device
                            Settings</a></li>
                    <li><a href="faq.html" class="nav-link">FAQs</a></li>
                    <li><a href="User_Login.html" class="nav-link">LogOut</a></li>
                </ul>
            </nav>
        </div>

        <div id="message"></div>
        <div id="AccountSettings">
            <button>
                <a href="profile.html">Profile</a>
            </button>
        </div>
        <br>
        <div class="AccsCont">
            <table>
                <thead>
                    <tr>
                        <th>Account</th>
                        <th>IG Username</th>
                        <th>Account Label</th>
                        <th>Likes</th>
                        <th>Follows</th>
                        <th>Unfollows</th>
                        <th>Comments</th>
                        <th>Story Views</th>
                        <th>Outbound DM's</th>
                        <th>End Time Next Start Time</th>
                        <th>Account Settings</th>
                        <th>Target Settings</th>
                        <th>Running Status</th>
                        <th>Posts, Followers, Followings</th>
                    </tr>
                </thead>
                <tbody id="accountTableBody">

                </tbody>
            </table>
        </div>
        <div class="DevTab">
            <table class="device-table">
                <thead>
                    <tr>
                        <th>Device ID</th>
                        <th>Device Label</th>
                        <th>Connected Accounts</th>
                        <th>Edit Device</th>
                    </tr>
                </thead>
                <tbody id="deviceTableBody">
                </tbody>
                </tr>
            </table>
        </div>
    </div>
    <script>
        function downloadFile() {
            var confirmDialog = document.createElement('div');
            confirmDialog.className = 'confirm-dialog';
            confirmDialog.innerHTML = `
      <p>Do you want to download Software?</p>
      <br>
      <button id="yes-btn">Yes, Download!</button>
      <button id="no-btn">No, Exit!</button>
    `;
            document.body.appendChild(confirmDialog);

            document.getElementById('no-btn').addEventListener('click', function () {
                document.body.removeChild(confirmDialog);
            });

            document.getElementById('yes-btn').addEventListener('click', function () {
                var link = document.createElement('a');
                link.href = '/Documents/MechNetAutomator.rar';
                link.download = 'MechNetAutomator.rar';
                link.click();
                document.body.removeChild(confirmDialog);
            });

        }
    </script>
    <script src="/Ns/Home.js"></script>
    <script src="/Ns/inactivity_logout.js"></script>
</body>

</html>