document.addEventListener("DOMContentLoaded", function () {
    var listBox = document.getElementById("savedWorkshopsList");

    if (!listBox) {
        return;
    }

    function getSavedWorkshops() {
        var savedItems = [];

        for (var i = 0; i < localStorage.length; i++) {
            var key = localStorage.key(i);

            if (key.indexOf("workshop:") === 0) {
                var savedData = localStorage.getItem(key);
                var itemData;

                try {
                    itemData = JSON.parse(savedData);
                } catch (error) {
                    itemData = {
                        title: savedData,
                        url: key.replace("workshop:", ""),
                        image: ""
                    };
                }

                savedItems.push({
                    key: key,
                    url: itemData.url || key.replace("workshop:", ""),
                    title: itemData.title || "Saved Workshop",
                    image: itemData.image || ""
                });
            }
        }

        return savedItems;
    }

    function renderSavedWorkshops() {
        var savedItems = getSavedWorkshops();

        if (savedItems.length === 0) {
            listBox.innerHTML =
                '<div class="saved-workshops-empty">' +
                    'No saved workshops found in this browser.' +
                '</div>';
            return;
        }

        var html = '<ul class="saved-workshop-list">';

        savedItems.forEach(function (item) {
            html +=
                '<li class="saved-workshop-item">' +

                    (item.image
   					 ? '<a class="saved-workshop-image-link" href="' + item.url + '" title="' + item.title + '">' +
       					'<img class="saved-workshop-image" src="' + item.image + '" alt="' + item.title + '">' +
      					'</a>'
   						 : ''
						) +

                    '<div class="saved-workshop-title">' +
                        item.title +
                    '</div>' +

                    '<div class="saved-workshop-actions">' +

                        '<a class="saved-workshop-view" href="' +
                            item.url +
                        '">' +
                            'View Workshop' +
                        '</a>' +

                        '<button class="saved-workshop-remove" ' +
                            'type="button" data-save-key="' +
                            item.key +
                        '">' +
                            'Remove' +
                        '</button>' +

                    '</div>' +

                '</li>';
        });

        html += '</ul>';

        listBox.innerHTML = html;
    }

    listBox.addEventListener("click", function (event) {
        if (
            event.target.classList.contains("saved-workshop-remove")
        ) {
            var saveKey = event.target.getAttribute("data-save-key");

            localStorage.removeItem(saveKey);

            renderSavedWorkshops();
        }
    });

    renderSavedWorkshops();
});