<!DOCTYPE html>
<html dir="rtl" lang="ar">

<head>
    <html prefix="og: https://ogp.me/ns#">
    <meta charset="UTF-8">
    <meta name="theme-color" content="#ff0000">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>القائمة السوداء | Blacklist</title>
    <meta property="og:title" content="Blacklist Server" />
    <meta property="og:type" content="website" />
    <meta property="og:description"
        content="مرحبًا بك في خادم القائمة السوداء حيث أقوى خدمات الحماية والبرمجة والتطوير" />
    <meta property="og:url" content="https://safeguard-discord.com" />
    <link rel="shortcut icon" href="https://www.raed.net/img?id=1153063" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/kursor/dist/kursor.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/blacklist.css">
    <script src="https://unpkg.com/kursor"></script>
</head>

<body>
    <div class="loader-wrapper">
        <div class="loader">
            <img src="https://www.raed.net/img?id=1153063" alt="Loading Logo" class="loader-logo">
        </div>
    </div>

    <nav class="navbar">
        <div class="nav-container">
            <h1>القائمة السوداء</h1>
            <a href="/dashboard" class="nav-button">
                <i class="fas fa-arrow-right"></i>
                العودة للوحة التحكم
            </a>
        </div>
    </nav>

    <div class="main-container">
        <div class="section-card">
            <div class="search-container">
                <input type="text" id="searchInput" class="search-input" placeholder="البحث عن طريق معرف الديسكورد...">
            </div>

            <div class="spinner"></div>
            <div class="no-results">
                <i class="fas fa-search"></i>
                <p>لم يتم العثور على نتائج</p>
            </div>

            <table class="blacklist-table">
                <thead>
                    <tr>
                        <th>المستخدم</th>
                        <th>معرف الديسكورد</th>
                        <th>تاريخ الإضافة</th>
                        <th>السبب</th>
                    </tr>
                </thead>
                <tbody id="blacklistTableBody">
                    <% blacklistData.forEach((user, index)=> { %>
                        <tr class="blacklist-row" style="--index: <%= index %>">
                            <td data-label="المستخدم">
                                <img src="<%= user.avatar %>" alt="<%= user.username %>" class="user-avatar">
                                <%= user.username %>
                            </td>
                            <td data-label="معرف الديسكورد" class="discord-id">
                                <%= user.discordId %>
                            </td>
                            <td data-label="تاريخ الإضافة">
                                <%= new Date(user.addedAt).toLocaleDateString('ar-EG', { year: 'numeric' ,
                                    month: '2-digit' , day: '2-digit' }) + ' م' %>
                            </td>
                            <td data-label="السبب">
                                <%= user.reason %>
                            </td>
                        </tr>
                        <% }); %>
                </tbody>
            </table>
        </div>
    </div>

    <script src="/js/blacklist.js"></script>
    <!-- الحمد لله -->
</body>

</html>