<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eversync</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    {% load static %}
    <link rel="icon" href="{% static 'favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'index-style.css' %}" ">
    {% block scripts %}
        {% include "sentry_replay.html" %}
    {% endblock %}

    <style>
        
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #1c1e21;
    font-weight: bold;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
}
.form-group input:focus {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 2px #e7f3ff;
}

.login-button {
    width: 100%;
    padding: 12px;
    background-color: #1877f2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
.login-button:hover {
    background-color: #166fe5;
}
    </style>

    <style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh; /* Ensures vertical centering */
}

.welcome-box {
  padding: 20px;
  border-radius: 8px;
  max-width: 300px;
  width: 100%;
}

/* On mobile */
@media (max-width: 700px) {
  .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .welcome-box {
    max-width: 90vw;
    padding: 15px;
  }
  .content-box {
    width: 100%;
  }
}

    </style>
</head>
    
</head>
<body>
    <div class="header">
        <div class="header-content">
            <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
            <a href="/" class="logo" >eversync</a>
            <div class="nav-links" style="position: relative;">
                <div class="dropdown">
                    <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                        Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
                    </button>
                    <div class="dropdown-menu" style="display: none; position: absolute; right: 0; background-color: #333; border: 1px solid #444; border-radius: 4px; padding: 10px; width: 184px;">
                        
                        <form action="{% url 'manage' %}" method="post" style="margin: 0;">
                            {% csrf_token %}
                            <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Manage Account</button>
                        </form>
                        
                        <form action="{% url 'logoutz' %}" method="post" style="margin: 0;">
                            {% csrf_token %}
                            <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                        </form>
                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="welcome-box">
            <div style="width: 300px; aspect-ratio: 1 / 1; overflow: hidden;">
                <img id="thumbnail" style="width: 100%; height: 100%; object-fit: cover;" />
            </div>
            <div id="songTitle" style="margin: 10px 0; text-align: center; font-weight: bold;"></div>
            <form onsubmit="return false;" class="form-group">
            <div class="form-group">
            <input type="text" id="musicInput"  class="form-label" placeholder="Enter artist - song">
            <button onclick="playSong()" class="login-button">Play</button>
        </div>

        </form>
        <audio id="musicPlayer" controls style="width: 100%;"></audio>            
            <div class="audio-controls" style="margin-top: 15px; display: flex; flex-direction: column; gap: 10px;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div style="display: flex; gap: 10px;">
                        <button onclick="document.getElementById('musicPlayer').play()" class="control-button">
                            <i class="fas fa-play"></i>
                        </button>
                        <button onclick="document.getElementById('musicPlayer').pause()" class="control-button">
                            <i class="fas fa-pause"></i>
                        </button>
                    </div>
                    
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <i class="fas fa-volume-down"></i>
                        <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1" 
                               style="width: 100px;" onchange="document.getElementById('musicPlayer').volume = this.value">
                    </div>
                </div>
            </div>

            <style>
                .control-button {
                    background: #1877f2;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    padding: 8px 15px;
                    cursor: pointer;
                }
                .control-button:hover {
                    background: #166fe5;
                }
                #volumeSlider {
                    height: 4px;
                    background: #ddd;
                    border-radius: 2px;
                }
                #volumeSlider::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    width: 12px;
                    height: 12px;
                    background: #1877f2;
                    border-radius: 50%;
                    cursor: pointer;
                }
            </style>

            <script>
                async function playSong() {
                    const query = document.getElementById("musicInput").value;
                    const audio = document.getElementById("musicPlayer");
            
                    // Play the song
                    audio.src = `/stream_song/?query=${encodeURIComponent(query)}`;
                    audio.load();
                    audio.play();
            
                    // Fetch and show thumbnail + title
                    fetchThumbnail(query);
                }
            
                async function fetchThumbnail(query) {
                    const res = await fetch(`/get_thumbnail/?query=${encodeURIComponent(query)}`);
                    const data = await res.json();
                    if (data.thumbnail) {
                        document.getElementById("thumbnail").src = data.thumbnail;
                        document.getElementById("songTitle").innerText = data.title;
                    }
                }
            </script>
        </div>
    </div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const toggle = document.querySelector('.dropdown-toggle');
        const menu = document.querySelector('.dropdown-menu');
        toggle.addEventListener('click', function () {
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        });
    });

    
    const toggle = document.getElementById("themeToggle");
        const root = document.documentElement;

        if (localStorage.getItem("theme") === "dark") {
        root.classList.add("dark");
        }

        toggle.addEventListener("click", () => {
        root.classList.toggle("dark");
        if (root.classList.contains("dark")) {
            localStorage.setItem("theme", "dark");
        } else {
            localStorage.setItem("theme", "light");
        }
        });
</script>
</body>
</html>