{% extends "base.html" %}

{% block content %}

    <div class="row justify-content-start">
        <div class="col-sm-auto">
                            <script language="JavaScript" type="text/javascript" src="/static/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/static/js/sprinkle.js"></script>
<style>
.profile-banner {
    width: 33.02cm; /* Ширина баннера 25 см */
     /* Высота, вы можете указать любую желаемую высоту */
    background-size: cover; /* Заполнение фона для покрытия всей области */
    background-position: center; /* Центрировать изображение */
    border-radius: 15px; /* Радиус закругления углов, вы можете изменить это значение */
    margin: 0 auto; /* Центрирование элемента */
    overflow: hidden; /* Скрытие частей изображения, которые выходят за пределы */
}
</style>
<div class="profile-banner" style="background-image: url('{{ url_for('static', filename='uploads/banners/' ~ user.banner) }}'); height: 200px; background-size: cover;">

</div>
<p>

            <h4 class="d-flex align-items-center">
    <img src="{{ url_for('static', filename='avatars/' ~ user.avatar) }}" alt="Avatar" style="width:160px; height:160px; border-radius:50%; margin-right: 15px;">
    <div>
    <h1 class="d-flex align-items-center">
        <div>{% if is_deleted %}
                    Удаленный пользователь
                {% else %}
                    {{ user.name }} {{ user.surname }}
                {% endif %}<a class="text-decoration-none text-dark" href="/user/{{ user.id }}">


        {% if user.is_checked %}
            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true" style="pointer-events: none; display: inherit;"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zM9.8 17.3l-4.2-4.1L7 11.8l2.8 2.7L17 7.4l1.4 1.4-8.6 8.5z"></path></svg>
        {% endif %}

        {% if user.is_admin %}
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53" height="46" viewBox="0,0,83.85813,76.17309"><g transform="translate(-198.07094,-139.34503)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill-rule="nonzero" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><path d="M214.13515,215.51812l-16.06421,-71.03623l83.85813,0.29476l-18.86439,70.74148z" fill="#1b7aff" stroke="none" stroke-width="0" stroke-linecap="butt"/><path d="M233.53062,190.26421l6.14991,-18.42359l4.69129,18.25007l17.98845,-1.95989l-15.45821,10.53263l5.83317,14.33014l-13.65936,-9.67733l-13.06852,9.42804l4.62117,-14.73647l-14.32865,-10.32196z" fill="#000000" stroke="#000000" stroke-width="0.5" stroke-linecap="round"/><text transform="translate(211.24343,164.59503) scale(0.5,0.5)" font-size="40" xml:space="preserve" fill="#000000" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="Pixel" font-weight="normal" text-anchor="start" style="mix-blend-mode: normal"><tspan x="0" dy="0">admin</tspan></text></g></g></svg>
                        {% endif %}
                        {% if user.is_online %}
                        <img src="{{ url_for('static', filename='img/online.svg') }}" alt="Online" class="status-icon online" data-toggle="tooltip" title="Online" width="20" height="20">
                    {% else %}
                        <img src="{{ url_for('static', filename='img/offline.svg') }}" alt="Offline" class="status-icon offline" data-toggle="tooltip" title="Offline" width="20" height="20">
                    {% endif %}
    </a>{% if user.is_blocked %}
                        <span class="badge bg-danger">Заблокирован</span>
                    {% endif %}
{% if user.is_tester %}
                        <!-- Display the Tester SVG Badge -->
                        <p>HELLO WORLD</p>
                    {% endif %}

    </div>
        <h4 class="d-flex align-items-center">
        <div class="text-muted">{% if not is_deleted %}@{{ user.login }} • {% endif %}{{ user.followers }} {{ user.followers | decline_subscription }} • {{ video_count }} видео </div>
        <button onclick="follow()" class="btn btn-outline-danger {% if subscription %} active {% endif %}" type="submit" name="follow" id="follow" {% if not authenticated or current_user.id == user.id %} disabled {% endif %}>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-plus-fill" viewBox="0 0 16 16">
                        <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                        <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
                    </svg>
                    <span id="followers">{{ user.followers }}</span>
                </button>
    </div>

        </div>
        {% if is_birthday %}
    <div class="alert alert-success" role="alert">
        🎉 Сегодня твой день рождения! Поздравляем! 🎉
    </div>
    {% endif %}
</h2>{% if user.birthday %}
    <p>День рождения: {{ user.birthday.strftime('%d %B') }}{% if user.birthday.year %} {% endif %}</p>
{% endif %}
                {% if authenticated and current_user.id == user.id %}
            <div class="col-sm-auto">

            </div>
        {% endif %}
        <div class="col-sm-auto">
            <h2 class="text-secondary">

            </h2>
        </div>
        <div class="col-sm-auto">
            <h2>

            </h2>
        </div>
    </div>
    {% if authenticated and current_user.id == user.id %}

{% endif %}
<h5>{% if user.channel_description %}Описание канала:{% endif %}</h5>
        <p>{% if user.channel_description %}{% if not is_deleted %}
            <p>{{ user.channel_description }}</p>
            {% endif %}{% endif %}</p>
    <div class="row">
        <div class="row">
            {% if authenticated and current_user.id == user.id %}
            <h4>Мои видео</h4>
        {% else %}
            <h4>Все видео {{ user.name }}</h4>
        {% endif %}
        </div>
        <div class="row">
            {% if empty %}
                {% if authenticated and current_user.id == user.id %}
                <h5>Вы пока не загрузили ни одного видео, но вы можете сделать это в любой момент!</h5>
                <div>
                <img src="/static/img/novideos.png" alt="No videos:(" width="400" height="400">
                </div>
            {% else %}
                <h5>Пользователь не загрузил ни одного видео</h5>
                <div>
                <img src="/static/img/novideos.png" alt="No videos:(" width="400" height="400">
                </div>
            {% endif %}
            {% else %}
                {% for row in videos %}
                <div class="row">
                    {% for vid in row %}
                    <div class="col-4">
                        <a href="/video/{{ vid.id }}"><img loading="lazy" src="/static/pre/{{ vid.id }}.jpg" style="width: 100%" width="408" height="230"></a>
                        <a class="text-decoration-none text-dark h5 mb-0" href="{{ url_for('video', video_id=vid.id) }}">{{ vid.title | truncate(30) }}</a>
                        <p class="text-muted mb-0">
                            {{ vid.views }} {{ vid.views | decline_views }} -
                            Загружено {{ vid.datetime | timesince }} назад
                        </p>
                    </div>

                    {% endfor %}
                    <p>
                </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
    <meta name="keywords" content="video, sharing, camera phone, video phone, free, upload">
    <style>

    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
    <script type=text/javascript>
        function follow() {
            var follow = document.getElementById("follow");
            var unfollow = document.getElementById("unfollow");
            var followers = document.getElementById("followers");
            if ( follow.classList.contains('active') )
            {
                follow.classList.remove("active");
                followers.innerHTML = parseInt(followers.innerText) - 1;
                $.post('/api/not_follow/{{ user.id }}');
            }
            else
            {
                follow.classList.add("active");
                followers.innerHTML = parseInt(followers.innerText) + 1;
                $.post('/api/follow/{{ user.id }}');
                if ( unfollow.classList.contains('active') )
                {
                    unfollow.classList.remove("active");
                    followers.innerHTML = parseInt(followers.innerText) + 1;
                }
            }
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js" integrity="sha512-tRRP9MU/H8KdkfWrUGsBcMpLrTqQewi1giji9RgrNMzSPChAK9wGqlPE5LIe7sI83AWVOcZvMSIEK9jdMdgu8Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    var socket = io();

    // Listen for user_status events
    socket.on('user_status', function(data) {
        // Check if the event is related to the current user
        {% if user.id == current_user.id %}
            if(data.status === 'online') {
                $('.status-icon').attr('src', "{{ url_for('static', filename='img/online.svg') }}");
                $('.status-icon').attr('alt', 'Online');
                $('.status-icon').attr('title', 'Online');
            } else {
                $('.status-icon').attr('src', "{{ url_for('static', filename='img/offline.svg') }}");
                $('.status-icon').attr('alt', 'Offline');
                $('.status-icon').attr('title', 'Offline');
            }
        {% endif %}
    });
</script>
{% endblock %}
когда у юзера др один раз при заходе на его страницу должны посыпаться конфетти и эмодзи и потом это все пропадает и страница как нормальная