<!-- Первые N тем в описании форума (новая версия) -->
<style>
.topicslist {
  position: absolute;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .35);
  margin-top: 5px;
  padding: 10px;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, .35);
  border-radius: 3px;
  max-width: 90vw;
  z-index: 110;
}
.topicslist .sticky a {
  font-weight: bold;
  color: #f00;  /* Цвет для выделенных тем */
}
.topicslist .closed a {
  color: #a9a9a9;  /* Цвет для закрытых тем */
}
.topicslist .load {
  animation: slow-load-blink 2s ease-in-out infinite;
}

.clickt {
  cursor: pointer;
  user-select: none;
}
.clickt img {
  border: 0;
  line-height: 1;
  max-height: 16px;
  max-width: 16px;
  vertical-align: middle;
}
@keyframes slow-load-blink{0%,100%{opacity:1}50%{opacity:.3}}
</style>
<script>
window.firstNtopics = {
    // Настройки скрипта
    count: 5,            // Максимальное количество выводимых тем форума
    touchDevice: 1,      // 1- включить принудительно вариант показа блока click для сенсорных устройств , 0 - выключить
    useSession: 1,       // 1- включить кэширование списка тем на 10 минут, 0 - выключить
    selectAct: 'click',  // Вариант показа блока: 'click' (нажатие по значку рядом с названием темы) или 'hover' (наведение курсора на название темы)

    // Шаблон для действия click
    templateClick: ' <span class="clickt" title="Показать список тем"><img src="https://forumstatic.ru/files/001c/3a/d4/70712.png" alt="Список тем"></span>',
};
</script>
<script type="module" src="https://forumstatic.ru/files/001c/3a/d4/90907.js"></script>

<div id="awards-modal" style="display: none;">
    <div class="modal-content">
        <div class="container" style="display: none;">
            <div class="awards-header">
                 <h3>Награды пользователя</h3>
                 <div id="closeBtn">/*тут ваш крестик*/</div>
            </div>
            <table cellspacing="0">
                <tbody id="awards-content"></tbody>
            </table>
        </div>
    </div>
</div>

<script>
$(document).on('click', '.ProfileStat .pa-awards a', function (e) {
    e.preventDefault();
    e.stopPropagation();

    const awards = $(this).closest('.post-author').find('.pa-awards');
    const userId = awards.attr('data-id'); 

    const params = {
        check: {
            board_id: BoardID,
            user_id: UserID,
            partner_id: PartnerID,
            group_id: GroupID,
            user_login: UserLogin,
            user_lastvisit: UserLastVisit,
            user_avatar: UserAvatar,
            user_unique_id: UserUniqueID,
            host: document.domain,
            sign: ForumAPITicket
        },
        board_id: BoardID,
        sort: "user",
        users_ids: [userId]
    };

    $('#awards-modal').fadeIn();

    $.jsonRPC.request('awards/index', {
        params: params,
        success: function (data) {
            let tableContent = '';
            data.result[0].awards.forEach(award => {
                tableContent += `
                    <tr class="alt1">
                        <td class="tc2"><img src="${award.item.href}" alt="${award.item.name}"></td>
                        <td class="tcl"><b>${award.item.name}</b><br>${award.item.desc}<br>${award.desc}</td>
                    </tr>
                `;
            });

            $('#awards-content').html(tableContent);
            $('#awards-modal .container').show();
        },
        error: function (error) {
            $('#awards-modal .container').html('<div>Ошибка при загрузке данных. Пожалуйста, попробуйте позже.</div>').show();
        }
    });
});

$(document).on('click', function (e) {
    if ($(e.target).closest('#awards-modal .modal-content').length === 0) {
        $('#awards-modal').fadeOut();
    }
});

$(document).on('click', '#awards-modal #closeBtn', function (e) {
$('#awards-modal').fadeOut();
});

</script>

/* awards */ 
div.modal-content h3 {
    font-family: 'Times New Roman';
    font-weight: bold;
    font-size: 21px;
    text-align: left;
}
 
#pun #awards-modal tr {
    display: block !important;
}
 
div.modal-content .container {
    padding: 4px 12px;
}
 
div.modal-content div#closeBtn {
    cursor: pointer;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 7px;
    right: -4px;
}
 
#awards-modal .awards-header {
    position: relative;
}
 
#awards-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
 
#awards-modal .modal-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
    border: 2px solid gray;
    background: white;
    box-shadow: 0 0 20px -11px #000;
}
 
#awards-modal .container table {
    width: 100%;
    border-collapse: collapse;
}
 
#awards-modal .container td {
    padding: 4px;
    text-align: left;
}

#awards-modal .container td.tc2 {
   width: 53px;
}

#awards-modal .container img {
    max-width: 53px;
    max-height: 53px;
    border: 1 double gray;
}