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

<head>
    <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>
    <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/downloader.css">
    <script src="https://unpkg.com/kursor"></script>
</head>

<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <h1>تحميل المحتوى</h1>
            </div>
            <div class="nav-buttons">
                <a href="/discord-bots" class="action-button">
                    <i class="fa-solid fa-shapes"></i>
                    العودة للتطبيقات
                </a>
                <a href="/dashboard" class="action-button">
                    <i class="fas fa-arrow-right"></i>
                    العودة للوحة التحكم
                </a>
            </div>
        </div>
    </nav>

    <div class="notification" id="notification"></div>

    <div class="dashboard-container">
        <div class="welcome-card">
            <div class="avatar-container">
                <img src="<%= user.avatar %>" alt="صورة الملف الشخصي" class="welcome-avatar">
            </div>
            <div class="welcome-text">
                <h2><span class="welcome-heading">مرحبًا بك يا </span><span class="username">
                        <%= user.username %>
                    </span></h2>
                <p class="welcome-message">يمكنك تحميل المحتوى من المنصات المدعومة باستخدام البطاقة أدناه</p>
            </div>
        </div>

        <div class="download-container">
            <div class="input-card">
                <div class="platform-icons">
                    <div class="platform-icon">
                        <i class="fab fa-tiktok"></i>
                        <div>TikTok</div>
                    </div>
                    <div class="platform-icon">
                        <i class="fab fa-instagram"></i>
                        <div>Instagram</div>
                    </div>
                </div>

                <form id="downloadForm">
                    <div class="form-group">
                        <label for="mediaUrl">رابط الوسائط</label>
                        <input type="url" id="mediaUrl" required placeholder="https://www.instagram.com/p/...">
                        <div class="media-type-selector">
                            <div class="media-type-option">
                                <i class="fas fa-video"></i>
                                <span>فيديو</span>
                            </div>
                            <div class="media-type-option">
                                <i class="fas fa-image"></i>
                                <span>صورة</span>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="action-button">
                        <i class="fas fa-download"></i>
                        تحميل المحتوى
                    </button>
                </form>

                <div class="loading-overlay" id="loadingOverlay">
                    <i class="fas fa-spinner fa-spin loading-spinner"></i>
                </div>
            </div>

            <div class="result-card" id="resultCard">
                <i class="fa-solid fa-hourglass-start waiting-icon"></i>
                <div class="result-content">
                    <div class="media-info">
                        <h3 id="platformType"></h3>
                    </div>
                    <button onclick="downloadMedia()" class="action-button">
                        <i class="fa-solid fa-floppy-disk"></i>
                        حفظ المحتوى
                    </button>
                </div>
            </div>
        </div>
    </div>

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

</html>