function createFileDisplay(file, imageRoute) {
    const fileDisplay = document.createElement('div');
    fileDisplay.classList.add('fileDisplay');

    // Style the background image to appear in a smaller icon container
    const fileIcon = document.createElement('div');
    fileIcon.classList.add('fileIcon');
    fileIcon.style.backgroundImage = `url(../${imageRoute})`;

    // Add the file as a JSON string in the data attribute
    fileDisplay.setAttribute('data-file', JSON.stringify(file));

    // Attach the click event to handle selection
    fileDisplay.onclick = function () {
        const fileData = JSON.parse(fileDisplay.getAttribute('data-file'));
        manageItem(fileDisplay, fileData);
    };

    // Add the file name below the icon
    const itemName = document.createElement('h4');
    itemName.classList.add('itemName');
    itemName.textContent = file.name;

    // Truncate long file names for better display
    if (file.name.length > 15) {
        itemName.textContent = file.name.substring(0, 12) + '...';
    }

    // Append the icon and name to the fileDisplay container
    fileDisplay.appendChild(fileIcon);
    fileDisplay.appendChild(itemName);

    return fileDisplay;
}
function createImageDisplay(file) {
    const imageDisplay = document.createElement('div');
    imageDisplay.classList.add('imageDisplay');

    imageDisplay.setAttribute('data-file', JSON.stringify(file));

    imageDisplay.onclick = function () {
        const fileData = JSON.parse(imageDisplay.getAttribute('data-file'));
        manageItem(imageDisplay, fileData);
    };
    // Use encodeURIComponent to handle special characters in the file name
    const imageUrl = file.path;
    console.log('Image path:', imageUrl);  // Log to see the final URL

    imageDisplay.style.backgroundImage = `url(${imageUrl})`;

    return imageDisplay;
}
function createVideoDisplay(file) {
    const videoDisplay = document.createElement('video');
    videoDisplay.classList.add('videoDisplay');
    videoDisplay.setAttribute('data-file', JSON.stringify(file));

    // Set the video source
    videoDisplay.setAttribute('src', file.path);  // Set video file path
    videoDisplay.setAttribute('controls', true);  // Add controls (play, pause, volume, etc.)

    // Optional: Set a poster image for the video before it starts playing (if provided)
    //videoDisplay.setAttribute('poster', file.thumbnail || './resurse/film.png'); // Default poster if none is available

    // Click handler
    videoDisplay.onclick = function () {
        const fileData = JSON.parse(videoDisplay.getAttribute('data-file'));
        manageItem(videoDisplay, fileData);  // Handle the click (e.g., selection, etc.)
    };

    return videoDisplay;
}
function createMusicDisplay(file) {
    const musicDisplay = document.createElement('div');
    musicDisplay.classList.add('fileDisplay');  // Use the same base class for styling consistency

    // Create a music icon container to hold the music thumbnail
    const musicIcon = document.createElement('div');
    musicIcon.classList.add('musicIcon');
    musicIcon.style.backgroundImage = `url(${file.thumbnail || '../resurse/music.png'})`;  // Default if no thumbnail

    // Add the file as a JSON string in the data attribute
    musicDisplay.setAttribute('data-file', JSON.stringify(file));

    // Click handler to manage the file when clicked
    musicDisplay.onclick = function () {
        const fileData = JSON.parse(musicDisplay.getAttribute('data-file'));
        manageItem(musicDisplay, fileData);
    };

    // Create the audio element for playing the music
    const audioElement = document.createElement('audio');
    audioElement.classList.add('audio-element');
    audioElement.setAttribute('controls', false);  // Add playback controls (play, pause, volume)
    audioElement.setAttribute('src', file.path);  // Set the audio file path

    // Create a <p> element to display the file name under the audio player
    const fileNameElement = document.createElement('p');
    fileNameElement.classList.add('music-name');  // Add a class for styling

    // Truncate the file name if it exceeds a certain length
    if (file.name.length > 15) {
        fileNameElement.textContent = file.name.substring(0, 12) + '...';
    } else {
        fileNameElement.textContent = file.name;  // Display full name if not too long
    }

    // Append the music icon, audio player, and file name to the container
    musicDisplay.appendChild(musicIcon);
    musicDisplay.appendChild(audioElement);
    musicDisplay.appendChild(fileNameElement);

    return musicDisplay;
}
function createAppDisplay(file) {
    const fileDisplay = document.createElement('div');
    fileDisplay.classList.add('fileDisplay');

    // Style the background image to appear in a smaller icon container
    const fileIcon = document.createElement('div');
    fileIcon.classList.add('fileIcon');
    fileIcon.style.backgroundImage = `url(../resurse/exe.png)`;

    // Add the file as a JSON string in the data attribute
    fileDisplay.setAttribute('data-file', JSON.stringify(file));

    // Attach the click event to handle selection
    fileDisplay.onclick = function () {
        const fileData = JSON.parse(fileDisplay.getAttribute('data-file'));
        manageItem(fileDisplay, fileData);
    };

    // Add the file name below the icon
    const itemName = document.createElement('h4');
    itemName.classList.add('itemName');
    itemName.textContent = file.name;

    // Truncate long file names for better display
    if (file.name.length > 15) {
        itemName.textContent = file.name.substring(0, 12) + '...';
    }

    // Append the icon and name to the fileDisplay container
    fileDisplay.appendChild(fileIcon);
    fileDisplay.appendChild(itemName);

    return fileDisplay;
}