document.getElementById('catalog-button').addEventListener('click', function (event) {
    event.preventDefault();

    // Insert the loading.gif
    let resultSection = document.getElementById('resultSection');
    resultSection.innerHTML = '';
    let imgElement = document.createElement('img');
    imgElement.src = 'img/checking.gif';
    imgElement.style.width = '500px';
    imgElement.style.height = '500px';
    imgElement.style.display = 'block';
    imgElement.style.marginLeft = 'auto';
    imgElement.style.marginRight = 'auto';
    resultSection.appendChild(imgElement);

    fetch(`${window.BASE_URL}/rules/creature`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            resultSection.innerHTML = ''; // Clear results

            // Generate clickable elements for each creature
            let table = document.createElement('table');
            data.forEach(item => {
                let row = document.createElement('tr');
                let cell = document.createElement('td');
                let btn = document.createElement('button');
                btn.textContent = item;
                btn.addEventListener('click', function () {
                    document.getElementById('creature').value = item;
                    document.getElementById('search-button').click();
                });
                cell.appendChild(btn);
                row.appendChild(cell);
                table.appendChild(row);
            });
            resultSection.appendChild(table);
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
});