
const apiContainer = document.createElement('div');
apiContainer.id = 'api-container-api';
apiContainer.style.paddingBottom = "0px";
apiContainer.style.marginLeft = "25px";
apiContainer.style.overflowX = "hidden"; // Hide horizontal scrollbar
apiContainer.style.overflowY = "auto"; // Enable vertical scrolling
apiContainer.style.whiteSpace = "normal"; // Allow wrapping to the next line
apiContainer.style.width = "989px"; // Adjust the width as needed
apiContainer.style.border = "1px solid #ccc"; // Optional: for visibility
apiContainer.style.height = `100px`; // Set initial height

if(showAPI==true)
    {
        document.body.appendChild(apiContainer);
    }
// Banner
let banner = document.createElement('div');
banner.id = 'banner-bar'; // Corrected ID
banner.style.display = 'flex';
banner.style.justifyContent = 'flex-start';
banner.style.backgroundColor = '#d4ffd5';
banner.style.width = '100%';
banner.style.marginTop = '0px';
document.body.appendChild(banner);



// Outside Stats
let outsideStats_Panel = document.createElement('div');
outsideStats_Panel.id = 'stats';
outsideStats_Panel.className = 'statistics';
document.body.appendChild(outsideStats_Panel);

// Buttons For Stats
let statButtons_panel = document.createElement('div');
statButtons_panel.className ='statistics-buttons';
document.body.appendChild(statButtons_panel);

// Input Bar
let inputBar = document.createElement('div');
inputBar.id = 'input-bar'; // Corrected ID
inputBar.style.display = 'flex';
inputBar.style.justifyContent = 'flex-start';
inputBar.style.backgroundColor = '#f0f8ff';
inputBar.style.width = '100%';
inputBar.style.marginTop = '0px';
inputBar.style.paddingLeft = '10px';
document.body.appendChild(inputBar);

// Button Bar
let buttonBar = document.createElement('div');
buttonBar.id = 'button-bar'; // Unique ID
buttonBar.style.display = 'flex';
buttonBar.style.justifyContent = 'flex-start';
buttonBar.style.backgroundColor = 'lightgrey';
buttonBar.style.width = '100%';
buttonBar.style.marginTop = '3px';
document.body.appendChild(buttonBar);

// Optional: Sub-section of Button Bar (commented out, but corrected for reference)

// Trigger Sub Button Bar
let subButtonBar = document.createElement('div');
subButtonBar.id = 'sub-button-bar'; // Unique ID
subButtonBar.style.display = 'none';  
subButtonBar.style.justifyContent = 'flex-start';
subButtonBar.style.backgroundColor = 'lightgrey';
subButtonBar.style.width = '100%'; 
subButtonBar.style.marginTop = '3px';
document.body.appendChild(subButtonBar);

// MORE Sub Button Bar
let subButtonBarMore = document.createElement('div');
subButtonBarMore.id = 'more-sub-button-bar'; // Unique ID
subButtonBarMore.style.display = 'none';  
subButtonBarMore.style.justifyContent = 'flex-start';
subButtonBarMore.style.backgroundColor = 'lightgrey';
subButtonBarMore.style.width = '100%'; 
subButtonBarMore.style.marginTop = '3px';
document.body.appendChild(subButtonBarMore);


// Stats Sub Button Bar
let subButtonBarStats = document.createElement('div');
subButtonBarStats.id = 'stats-sub-button-bar'; // Unique ID
subButtonBarStats.style.display = 'none';  
subButtonBarStats.style.justifyContent = 'flex-start';
subButtonBarStats.style.backgroundColor = 'lightgrey';
subButtonBarStats.style.width = '100%'; 
subButtonBarStats.style.marginTop = '3px';
document.body.appendChild(subButtonBarStats);



// Button Bar Click Content
let buttonBarContentBoard = document.createElement('div');
buttonBarContentBoard.id = 'button-bar-content-board'; // Corrected placement of ID
buttonBarContentBoard.style.display = 'flex';
buttonBarContentBoard.style.width = '100%';
buttonBarContentBoard.style.paddingLeft = '30px';
buttonBarContentBoard.style.display = 'none';
document.body.appendChild(buttonBarContentBoard);

// Button Bar Click Content
let buttonBarContent = document.createElement('div');
buttonBarContent.id = 'button-bar-content'; // Corrected placement of ID
buttonBarContent.style.display = 'flex';
buttonBarContent.style.width = '100%';
buttonBarContent.style.paddingLeft = '30px';
document.body.appendChild(buttonBarContent);

// Button Bar Click Content
let buttonBarContentStats = document.createElement('div');
buttonBarContentStats.id = 'button-bar-content-stats'; // Corrected placement of ID
buttonBarContentStats.style.display = 'flex';
buttonBarContentStats.style.width = '100%';
buttonBarContentStats.style.paddingLeft = '30px';
document.body.appendChild(buttonBarContentStats);


function updateBorderVisibility() {
    if (outsideStats_Panel.textContent.trim() === '') {
        outsideStats_Panel.classList.add('hidden-border');
    } else {
        outsideStats_Panel.classList.remove('hidden-border');
    }
}