{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}
{% import "components/profile_card.html" as profile_card %}
{% import "components/profile_nav.html" as profile_nav %}

{% block title %}Пользователи{% endblock %}



{% block content %}
{{ header.section(user) }}
<section class="c_dg3k4">
<div class="c_gtoe9">
{{ profile_card.profile_card(user) }}
<div class="c_ru432">
{{ profile_nav.profile_nav(user, 'users') }}
<div class="c_tihtk" id="main">



    <style>
        input { padding: 8px; width: 300px; margin-bottom: 10px; border-bottom: 1px solid #5f1798;position: sticky;
  left: 10px;}
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
        th { background-color: #f4f4f4; }
        tr.hidden { display: none; }
        .highlight { background-color: #ffeb3b; padding: 2px 4px; border-radius: 3px; }
    </style>

   
    <input type="text" id="searchInput" placeholder="Поиск ..." onkeyup="searchTable()">
     
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Фото</th>
                <th>ФИО</th>
                <th>Email</th>
                <th>Телефон</th>
                <th>Место проживания</th>
                <th>Дата рождения</th>
            </tr>
        </thead>
        <tbody>
            {% for doc in users %}
            <tr>
                <td><a href="/artists/{{doc._id}}">{{users|length - loop.index0}}</a></td>
                <td><a href="/artists/{{doc._id}}"><img src="/a/{{doc._id}}" style="width: 50px;border-radius: 5px;"></a></td>
                <td><a href="/artists/{{doc._id}}">{% if 'user' not in doc.roles%}{{doc.username or ""}} | {%endif%}{{doc.female_name_lastname or ""}}</a></td>
                <td>{{doc.email or ""}}</td>
                <td>{{doc.phone or ""}}</td>
                <td>{{doc.living_place or ""}}</td>
                <td>{{doc.birthday or ""}}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <script>
function normalizeText(str) {
    return str
        .toLowerCase()
        // Основные русские замены
        .replace(/ё/g, 'е')
        .replace(/Ё/g, 'е')
        // Дополнительные частые замены/опечатки
        .replace(/й/g, 'и')      // й → и
        .replace(/ы/g, 'и')      // ы → и (очень частая путаница)
        .replace(/ъ/g, '')       // удаляем твёрдый знак
        .replace(/ь/g, '')       // удаляем мягкий знак (часто пропускают)
        .replace(/щ/g, 'ш')      // щ → ш
        // Латинские аналоги (для смешанного ввода)
        .replace(/e/g, 'е')
        .replace(/o/g, 'о')
        .replace(/a/g, 'а')
        .replace(/c/g, 'с')
        .replace(/x/g, 'кс')
        .replace(/y/g, 'и')
        // Удаляем лишние символы (оставляем буквы и цифры)
        .replace(/[^a-zа-я0-9]/g, ' ')
        .replace(/\s+/g, ' ')    // множественные пробелы → один
        .trim();
}
        function searchTable() {
            const input = document.getElementById("searchInput").value.toLowerCase();
            const table = document.getElementById("dataTable");
            const rows = table.getElementsByTagName("tr");

            for (let i = 1; i < rows.length; i++) { // skip header row
                const row = rows[i];
                const cells = row.getElementsByTagName("td");
                let match = false;
                // Check all columns in this row
                for (let cell of cells) {
                    if (normalizeText(cell.textContent).toLowerCase().includes(normalizeText(input))) {
                        match = true;
                        break;
                    }
                }

                // Show or hide the row
                row.classList.toggle("hidden", !match);
            }
        }
    </script>




</div>
</div>
</div>
</section>

{{ footer.section(user) }}
{% endblock %}

{% block head %}
{{ header.style() }}
{{ profile_nav.style() }}
{{ footer.style() }}
<style>
    @media (max-width: 699px) {
  .c_tihtk {
    overflow: scroll;
    justify-content: unset;
  }
}
</style>
{% endblock %}