<!--HTML-->
<!-- Каркас таблицы. Изначально скрыт (opacity: 0) для плавного появления -->
<div class="salt-directory" id="salt-directory" style="opacity: 0; transition: opacity 0.4s ease-in-out;">
    <!-- Первая колонка: Алфавит идет сверху вниз (от A до L) -->
    <div class="salt-col">
        <div id="group-abcd" class="salt-block"></div>
        <div id="group-efgh" class="salt-block"></div>
        <div id="group-ijkl" class="salt-block"></div>
    </div>
    
    <!-- Вторая колонка: Продолжение алфавита сверху вниз (от M до Z) -->
    <div class="salt-col">
        <div id="group-mnop" class="salt-block"></div>
        <div id="group-qrst" class="salt-block"></div>
        <div id="group-uvwxyz" class="salt-block"></div>
    </div>
    
    <!-- Третья колонка (имена и фамилии) -->
    <div class="salt-col salt-col-names">
        <div id="list-names" class="salt-block"></div>
        <div id="list-surnames" class="salt-block"></div>
    </div>
</div>

<script>
// Основная функция отрисовки данных
function renderSaltFaces() {
    let container = document.getElementById('salt-directory');

    if (typeof saltFaceClaims === 'undefined') {
        container.innerHTML = "Ошибка: данные не загрузились.";
        container.style.opacity = "1";
        return;
    }

    const alphabetGroups = [
        { id: 'group-abcd', title: 'a • b • c • d', regex: /^[a-dа-г]/i },
        { id: 'group-efgh', title: 'e • f • g • h', regex: /^[e-hд-ж]/i },
        { id: 'group-ijkl', title: 'i • j • k • l', regex: /^[i-lз-м]/i },
        { id: 'group-mnop', title: 'm • n • o • p', regex: /^[m-pн-п]/i },
        { id: 'group-qrst', title: 'q • r • s • t', regex: /^[q-tр-у]/i },
        { id: 'group-uvwxyz', title: 'u • v • w • x • y • z', regex: /^[u-zф-я]/i }
    ];

    // Сортировка всего массива по алфавиту
    saltFaceClaims.sort((a, b) => a.face.localeCompare(b.face));

    // 1. Отрисовка колонок с внешностями (выводятся все)
    alphabetGroups.forEach(group => {
        let filteredFaces = saltFaceClaims.filter(item => group.regex.test(item.face.charAt(0)));
        let html = `<div class="salt-title"><span>${group.title}</span></div><div class="salt-list">`;
        filteredFaces.forEach(item => {
            html += `
                <div class="salt-item">
                    <span class="salt-face">${item.face.toLowerCase()}</span>
                    <a href="${item.profile}" class="salt-char" target="_blank">${item.name.toLowerCase()} ${item.surname.toLowerCase()}</a>
                </div>
            `;
        });
        html += `</div>`;
        document.getElementById(group.id).innerHTML = html;
    });

    // 2. ИМЕНА (Только те, у кого boughtName === true)
    let boughtNames = saltFaceClaims.filter(item => item.boughtName === true);
    let namesSorted = boughtNames.sort((a, b) => a.name.localeCompare(b.name));
    
    let namesHtml = `<div class="salt-title"><span>имена</span></div><div class="salt-list salt-list-right">`;
    namesSorted.forEach(item => { 
        namesHtml += `<a href="${item.profile}" class="salt-single" target="_blank">${item.name.toLowerCase()}</a>`; 
    });
    namesHtml += `</div>`;
    document.getElementById('list-names').innerHTML = namesHtml;

    // 3. ФАМИЛИИ (Только те, у кого boughtSurname === true)
    let boughtSurnames = saltFaceClaims.filter(item => item.boughtSurname === true);
    let surnamesSorted = boughtSurnames.sort((a, b) => a.surname.localeCompare(b.surname));
    
    let surnamesHtml = `<div class="salt-title"><span>фамилии</span></div><div class="salt-list salt-list-right">`;
    surnamesSorted.forEach(item => { 
        surnamesHtml += `<a href="${item.profile}" class="salt-single salt-surname-color" target="_blank">${item.surname.toLowerCase()}</a>`; 
    });
    surnamesHtml += `</div>`;
    document.getElementById('list-surnames').innerHTML = surnamesHtml;

    // Плавно показываем готовую таблицу
    container.style.opacity = "1";
}

// Динамическая загрузка файла с обходом кэша
let script = document.createElement('script');
let baseUrl = "https://forumstatic.ru/files/001c/bd/c6/41033.js"; // Твоя чистая ссылка
script.src = baseUrl + "?nocache=" + new Date().getTime(); // Уникальная метка для свежей версии
script.charset = "utf-8";

// Сразу запускаем отрисовку, как только файл скачался
script.onload = renderSaltFaces;
document.head.appendChild(script);
</script>