const UI = {
    buildEventsPane: () => {
        const eventsList = [
            { year: 1930, location: "Uruguay", icon: "uy" },
            { year: 1934, location: "Italy", icon: "it" },
            { year: 1938, location: "France", icon: "fr" },
            { year: 1954, location: "Switzerland", icon: "ch" },
            { year: 1958, location: "Sweden", icon: "se" },
            { year: 1962, location: "Chile", icon: "cl" },
            { year: 1966, location: "England", icon: "gb" },
            { year: 1970, location: "Mexico", icon: "mx" },
            { year: 1974, location: "West Germany", icon: "de" },
            { year: 1978, location: "Argentina", icon: "ar" },
            { year: 1982, location: "Spain", icon: "es" },
            { year: 1986, location: "Mexico", icon: "mx" },
            { year: 1990, location: "Italy", icon: "it" },
            { year: 1994, location: "USA", icon: "us" },
            { year: 1998, location: "France", icon: "fr" },
            { year: 2002, location: "Japan / South Korea", icon: "jp" },
            { year: 2006, location: "Germany", icon: "de" },
            { year: 2010, location: "Johannesburg", icon: "za" },
            { year: 2014, location: "Brazil", icon: "br" },
        ];

        const eventsDiv = document.querySelector('.events');

        while (eventsDiv.hasChildNodes()) {
            eventsDiv.firstChild.remove();
        }

        eventsList.forEach((evt) => {
            const item = document.createElement('div');
            const year = document.createElement('div');
            const location = document.createElement('div');
            const flag = document.createElement('div');
            const flagIcon = document.createElement('div');

            item.className = "event-item";
            year.className = "event-year";
            location.className = "event-location";
            flag.className = "event-flag";

            item.addEventListener('click', main.generateDiagram.bind(null, evt.year));

            year.innerHTML = evt.year;
            location.innerHTML = evt.location;
            flagIcon.className = `flag-icon flag-icon-${evt.icon}`;

            flag.appendChild(flagIcon);
            item.appendChild(flag);
            item.appendChild(year);
            item.appendChild(location);

            eventsDiv.appendChild(item);
        });
    },
};