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


        <meta charset="UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
                 <script src="https://kit.fontawesome.com/3edae8f033.js" crossorigin="anonymous"></script>
                 <style>




@keyframes up {
	0% {
		transform: translateY(0%);
	}

	50% {
		transform: translateY(100px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes across {
	from {
		right: 0%;
	}

	to {
		right: 100%;
	}
}

.fa-snowflake {
	color: #ecf2f8;
}

.snow {
	width: 100%;
	height: 100%;
	position: absolute;
}

.snowflake {
	animation-name: fall, shake;
	animation-duration: 10s, 5s;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
	position: fixed;
	left: 200px;
	z-index: 1;
}

@keyframes fall {
	0% {
		top: -10%;
	}

	100% {
		top: 98%;
	}
}

@keyframes shake {
	0% {
		transform: translatex(0);
	}
	50% {
		transform: translatex(50px);
	}
	100% {
		transform: translatex(0);
	}
}





        :root {
            --primary-color: {{ current_user.theme_primary_color if current_user.is_authenticated else '#007bff' }};
            --secondary-color: {{ current_user.theme_secondary_color if current_user.is_authenticated else '#6c757d' }};
            --background-color: {{ current_user.theme_background_color if current_user.is_authenticated else '#ffffff' }};
        }

        body {
            background-color: var(--background-color);
            color: var(--secondary-color);
        }
        p {
            transition: color 0.3s;
            color: var(--secondary-color);
        }
        .navbar, .btn-primary {
            background-color: var(--primary-color) !important;
        }

        .btn-secondary {
            background-color: var(--secondary-color) !important;
        }


        a {
            color: var(--primary-color);
        }

        a:hover {
            color: var(--secondary-color);
        }

        /* Example for card components */
        .card {
            background-color: var(--background-color);
            border: 1px solid var(--secondary-color);
            color: var(--secondary-color);
        }

    </style>





        <style type="text/css">
/* Styles for the avatar */
        .avatar {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .avatar img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }

        /* Styles for the dropdown */
        .dropdown {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            min-width: 160px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.8s ease-out;
        }
        .navbar {
    z-index: 1040; /* Ensure navbar is on top */
}

.dropdown-menu {
    height: 260px; /* Adjust based on navbar height */
}


.collapse {
    overflow: hidden; /* Ensures no overflow from expanded content */
}
        .dropdown a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown a:hover {
            background-color: #ddd;
        }

        .show {
            display: block;
            max-height: 770px; /* Adjust based on content height */
        }
        </style>
        <title>{{ title }}</title>
    </head>
    <body>

{% if current_user.selected_theme_id in [2, 17] %}
    <section class="snow">
    </section>
    {% endif %}

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const snowflakesCount = 80; // Adjust the number of snowflakes here
            const snowContainer = document.querySelector('.snow');

            for (let i = 0; i < snowflakesCount; i++) {
                const snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                snowflake.innerHTML = '<i class="fa-regular fa-snowflake"></i>';

                // Randomize the position
                const randomX = Math.random() * 100; // Random position in viewport width
                snowflake.style.left = `${randomX}vw`;

                // Randomize animation duration
                const randomDuration = Math.random() * 10 + 5; // Random time between 5 and 15 seconds
                snowflake.style.animationDuration = `${randomDuration}s`;

                // Randomize rotation
                const randomRotation = Math.random() * 360; // Random angle
                snowflake.style.transform = `rotate(${randomRotation}deg)`;

                snowContainer.appendChild(snowflake);
            }
        });
    </script>

     <style>
        :root {
            --primary-color: {{ current_user.theme_primary_color if current_user.is_authenticated else '#007bff' }};
            --secondary-color: {{ current_user.theme_secondary_color if current_user.is_authenticated else '#6c757d' }};
            --background-color: {{ current_user.theme_background_color if current_user.is_authenticated else '#ffffff' }};
        }

        body {
            background-color: var(--background-color);
            color: var(--secondary-color);
        }

        .navbar, .btn-primary {
            background-color: var(--primary-color) !important;
        }

        .btn-secondary {
            background-color: var(--secondary-color) !important;
        }

        a {
            color: var(--primary-color);
        }

        a:hover {
            color: var(--secondary-color);
        }

        .card {
            background-color: var(--background-color);
            border: 1px solid var(--secondary-color);
            color: var(--secondary-color);
        }

    </style>
</head>
<body>

    {% if show_birthday_modal %}
    <div class="modal fade" id="birthdayModal" tabindex="-1" role="dialog" aria-labelledby="birthdayModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="birthdayModalLabel">С днём рождения!</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Мы желаем вам очень счастливого дня рождения! 🎉</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Спасибо!</button>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


    <script>
    document.addEventListener("DOMContentLoaded", function() {
        {% if show_birthday_modal %}
            $('#birthdayModal').modal('show');
        {% endif %}
    });
    </script>
        <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
            <div class="container-fluid">
                <a class="navbar-brand mb-0 h1" href="/">

                    <img src="/static/img/vhs.png" alt="" width="201 height="35">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                                <a class="nav-link" href="/tools">Инструменты</a>
                            </li>
                        {% if authenticated %}
                            <li class="nav-item">
                                <a class="nav-link" href="/people">Подписки</a>
                            </li>
                            <li class="nav-item">
    <a class="nav-link" href="{{ url_for('users') }}">Все пользователи</a>
</li>

                            {% if current_user.is_admin %}
                            <li class="nav-item">
                                <a class="nav-link" href="{{ url_for('admin_users') }}">Админ</a>
                            </li>
                            {% endif %}
                            <li class="nav-item">
                                <a class="nav-link" href="/about">Про сайт</a>
                            </li>
                        {% else %}
                            <li class="nav-item">
                                <a class="nav-link" href="/login">Войти</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/register">Зарегаться</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/about">Про сайт</a>
                            </li>
                        {% endif %}
                        <li class="nav-item">
                                <a class="nav-link" href="/tracks">AudioBox</a>
                            </li>
                            <li>

                            </li>
                    </ul>


                    {% if authenticated %}
                    <div class="avatar" onclick="toggleDropdown()">
    <img src="{{ url_for('static', filename='avatars/' ~ current_user.avatar) }}" alt="Avatar"  style="width:60px; height:60px;">
  <div class="dropdown" id="dropdownMenu">
   <a href="/settings">
      <div style="width: 100%; height: 100%; display: block; fill: currentcolor;">
         <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit; width: 10%; height: 10%;">
            <path clip-rule="evenodd" d="m14.302 6.457-.668-.278L12.87 3.5h-1.737l-.766 2.68-.668.277c-.482.2-.934.463-1.344.778l-.575.44-2.706-.677-.868 1.504 1.938 2.003-.093.716c-.033.255-.05.514-.05.779 0 .264.017.524.05.779l.093.716-1.938 2.003.868 1.504 2.706-.677.575.44c.41.315.862.577 1.344.778l.668.278.766 2.679h1.737l.765-2.68.668-.277c.483-.2.934-.463 1.345-.778l.574-.44 2.706.677.869-1.504-1.938-2.003.092-.716c.033-.255.05-.514.05-.779 0-.264-.017-.524-.05-.779l-.092-.716 1.938-2.003-.869-1.504-2.706.677-.574-.44c-.41-.315-.862-.577-1.345-.778Zm4.436.214Zm-3.86-1.6-.67-2.346c-.123-.429-.516-.725-.962-.725h-2.492c-.446 0-.838.296-.961.725l-.67 2.347c-.605.251-1.17.58-1.682.972l-2.37-.593c-.433-.108-.885.084-1.108.47L2.717 8.08c-.223.386-.163.874.147 1.195l1.698 1.755c-.04.318-.062.642-.062.971 0 .329.021.653.062.97l-1.698 1.756c-.31.32-.37.809-.147 1.195l1.246 2.158c.223.386.675.578 1.109.47l2.369-.593c.512.393 1.077.72 1.681.972l.67 2.347c.124.429.516.725.962.725h2.492c.446 0 .839-.296.961-.725l.67-2.347c.605-.251 1.17-.58 1.682-.972l2.37.593c.433.108.885-.084 1.109-.47l1.245-2.158c.223-.386.163-.874-.147-1.195l-1.698-1.755c.04-.318.062-.642.062-.971 0-.329-.021-.653-.062-.97l1.698-1.756c.31-.32.37-.809.147-1.195L20.038 5.92c-.224-.386-.676-.578-1.11-.47l-2.369.593c-.512-.393-1.077-.72-1.681-.972ZM15.5 12c0 1.933-1.567 3.5-3.5 3.5S8.5 13.933 8.5 12s1.567-3.5 3.5-3.5 3.5 1.567 3.5 3.5ZM14 12c0 1.105-.895 2-2 2s-2-.895-2-2 .895-2 2-2 2 .895 2 2Z" fill-rule="evenodd"></path>
         </svg>
         <p>Настройки</p>
      </div>
   </a>
   <a href="/user/{{ current_user.id }}">Моя страница</a>
   <a href="/favorite">Избранное</a>
   <a href="/logout">
      <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit; width: 10%; height: 10%;">
         <path d="M20 3v18H8v-1h11V4H8V3h12zm-8.9 12.1.7.7 4.4-4.4L11.8 7l-.7.7 3.1 3.1H3v1h11.3l-3.2 3.3z"></path>
      </svg>
      Выйти
   </a>

</div>
    {% endif %}
</div>

<script>
    function toggleDropdown() {
        const dropdown = document.getElementById('dropdownMenu');
        dropdown.classList.toggle('show');
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
        if (!event.target.matches('.avatar img') && !event.target.matches('.dropdown') && !event.target.matches('.dropdown a')) {
            const dropdowns = document.getElementsByClassName('dropdown');
            for (let i = 0; i < dropdowns.length; i++) {
                let openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
                    {% if authenticated %}
                    <a href="/add_video">
                            <svg xmlns="http://www.w3.org/2000/svg" height="40" style="pointer-events: none; display: inherit; width: 100%; height: 100%;" viewBox="0 0 24 24" width="40" focusable="false" aria-hidden="true"><path d="M14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2zm3-7H3v12h14v-6.39l4 1.83V8.56l-4 1.83V6m1-1v3.83L22 7v8l-4-1.83V19H2V5h16z"></path></svg>
                            </a>
                            {% endif %}
                            <form class="d-flex" action="/search">
                        <input class="form-control me-2" type="search" name="search" placeholder="Поиск" aria-label="Search">
                        <button class="btn btn-success" type="submit">Найти</button>
                    </form>
                </div>
            </div>
        </nav>
         {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}
        <div class="container mt-3">
        {% block content %}{% endblock %}
    </div>


    <div id="toast-container" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
    <script>
        // Initialize SocketIO connection
        var socket = io();

        socket.on('notify', function (data) {
            showToast(data.message);
        });

        function showToast(message) {
            var container = document.getElementById('toast-container');
            var toastHTML = `
                <div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">${message}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', toastHTML);
            var toastElement = container.lastElementChild;
            var toast = new bootstrap.Toast(toastElement);
            toast.show();
            // Optional: remove after display to prevent clutter
            toastElement.addEventListener('hidden.bs.toast', function () {
                toastElement.remove();
            });
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>

        <style>
        div {
            backdrop-filter: blur(0px);
        }
        </style>

    </body>

</html>
the add video image in mobile version looks too big