<section class="diZContainer diZmxAuto">
    <h2 class="diZBorderBottom">Convert Base64 to Image</h2>
    <div class="diZMaxW500 diZmxAuto diZFlexColumn toolsSection diZmy20">
        <textarea rows="10" class="base64-textarea" placeholder="Enter base64 encoded image data"></textarea>
        <p class="diZDisplayNone diZDengerText" id="no-select-message"></p>
        <button class="convert-button diZmt2"><span>Convert to Image</span></button>
        <div class="" id="preview"></div>

        <div class="diZFlexColumn diZDisplayNone diZJustifyCenter" id="download-options" >
        <p>Choose Image Format & Download:</p>
        <div class="diZFlexRow">
            <button class="format-button" data-format="png"><span>PNG</span></button>
            <button class="format-button" data-format="jpeg"><span>JPEG</span></button>
            <button class="format-button" data-format="webp"><span>WebP</span></button>
        </div>
    </div>
    </div>
</section>
<script>
    document.querySelector('.convert-button').addEventListener('click', function() {
        var base64Data = document.querySelector('.base64-textarea').value.trim();
        if (base64Data !== '') {
            var img = document.createElement('img');
            img.src = base64Data;
            img.style.maxWidth = '100%';
            img.style.height = 'auto';
            document.getElementById('preview').innerHTML = '';
            document.getElementById('preview').appendChild(img);
            document.getElementById('download-options').style.display = 'block';
        } else {
            document.getElementById('no-select-message').innerHTML = 'Please enter base64 encoded image data.';
            document.getElementById('no-select-message').style.display = 'block';
        }
    });

    // Add event listeners to format buttons
    var formatButtons = document.querySelectorAll('.format-button');
    formatButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            var imageFormat = this.getAttribute('data-format');
            downloadImage(imageFormat);
        });
    });

    function downloadImage(imageFormat) {
        var base64Data = document.querySelector('.base64-textarea').value.trim();
        var downloadLink = document.createElement('a');
        downloadLink.href = base64Data;
        downloadLink.download = 'image.' + imageFormat;
        downloadLink.click();
    }
</script>