<!-- templates/edit_profile.html -->

{% extends "base.html" %}

{% block content %}
    <h2>Редактирование профиля</h2>
    <form method="POST" enctype="multipart/form-data">
        {{ form.hidden_tag() }}

        <!-- Existing fields -->
        <div class="form-group">
            {{ form.login.label(class="form-label") }}
            {{ form.login(class="form-control") }}
            {% for error in form.login.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>

        <div class="form-group">
            {{ form.name.label(class="form-label") }}
            {{ form.name(class="form-control") }}
            {% for error in form.name.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>

        <div class="form-group">
            {{ form.surname.label(class="form-label") }}
            {{ form.surname(class="form-control") }}
            {% for error in form.surname.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>

        <div class="form-group">
            {{ form.password.label(class="form-label") }}
            {{ form.password(class="form-control") }}
            {% for error in form.password.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>

        <div class="form-group">
            {{ form.channel_description.label(class="form-label") }}
            {{ form.channel_description(class="form-control", rows="3") }}
            {% for error in form.channel_description.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>
        <div class="form-group">
        <label for="banner">Upload Banner</label>
        <input type="file" name="banner" accept="image/*" class="form-control" >
    </div>
        <div class="form-group">
            {{ form.birthday.label(class="form-label") }}
            {{ form.birthday(class="form-control") }}
            {% for error in form.birthday.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>

        <!-- Theme selection -->
        <div class="form-group">
            {{ form.theme_name.label(class="form-label") }}
            {{ form.theme_name(class="form-control") }}
            {% for error in form.theme_name.errors %}
                <span class="text-danger">{{ error }}</span>
            {% endfor %}
        </div>

        <!-- Color pickers for custom theme -->
        <div id="custom-theme-colors" {% if form.theme_name.data != 'custom' %}style="display: none;"{% endif %}>
            <div class="form-group">
                {{ form.theme_primary_color.label(class="form-label") }}
                {{ form.theme_primary_color(class="form-control form-control-color") }}
                {% for error in form.theme_primary_color.errors %}
                    <span class="text-danger">{{ error }}</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.theme_secondary_color.label(class="form-label") }}
                {{ form.theme_secondary_color(class="form-control form-control-color") }}
                {% for error in form.theme_secondary_color.errors %}
                    <span class="text-danger">{{ error }}</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.theme_background_color.label(class="form-label") }}
                {{ form.theme_background_color(class="form-control form-control-color") }}
                {% for error in form.theme_background_color.errors %}
                    <span class="text-danger">{{ error }}</span>
                {% endfor %}
            </div>
        </div>

        {{ form.submit(class="btn btn-primary") }}
    </form>

    <!-- JavaScript to show/hide color pickers based on theme selection -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const themeSelect = document.querySelector('select[name="theme_name"]');
            const customColorsDiv = document.getElementById('custom-theme-colors');

            themeSelect.addEventListener('change', function() {
                if (this.value === 'custom') {
                    customColorsDiv.style.display = 'block';
                } else {
                    customColorsDiv.style.display = 'none';
                }
            });
        });
    </script>
{% endblock %}
переведи на русский и напиши что менять абсолютно все не нужно