<%@ Page Title="Thumbnail Grid" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Thumbnail Grid - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Thumbnail Grid</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Image Thumbnail Grid</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Display uploaded images in a responsive thumbnail grid. Each thumbnail shows the file name,
            size, and upload status with a smooth transition effect.
        </p>

        <au:AjaxFileUpload ID="Uploader1" runat="server"
            AllowMultiple="true"
            ShowThumbnails="true"
            AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp" />

        <div id="grid" class="mt-3" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;"></div>
        <div id="counter" class="mt-2 text-muted small">No images uploaded yet.</div>

        <div class="code-panel">
            <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
    AllowMultiple="true"
    ShowThumbnails="true"
    AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp" /&gt;

// JavaScript API approach
AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    maxFiles: 20,
    allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
    onSelect: function(files) {
        files.forEach(function(f) {
            var reader = new FileReader();
            reader.onload = function(e) {
                addThumbnail(e.target.result, f);
            };
            reader.readAsDataURL(f.file || f);
        });
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var grid = document.getElementById('grid');
    var counter = document.getElementById('counter');
    var imageCount = 0;

    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) {
            files.forEach(function(f) {
                var file = f.file || f;
                var reader = new FileReader();
                reader.onload = function(e) {
                    imageCount++;
                    var card = document.createElement('div');
                    card.className = 'border rounded overflow-hidden';
                    card.style.cssText = 'opacity:0;transition:opacity 0.3s;';
                    card.innerHTML = '<div style="height:110px;overflow:hidden;background:#f0f0f0;">' +
                        '<img src="' + e.target.result + '" style="width:100%;height:100%;object-fit:cover;" />' +
                        '</div>' +
                        '<div class="p-2">' +
                        '<div class="small text-truncate fw-bold">' + file.name + '</div>' +
                        '<div class="small text-muted">' + AjaxUploader.formatSize(file.size) + '</div>' +
                        '<div class="progress mt-1" style="height:4px;">' +
                        '<div class="progress-bar" id="bar-' + imageCount + '" style="width:0%;"></div></div>' +
                        '</div>';
                    grid.appendChild(card);
                    requestAnimationFrame(function() { card.style.opacity = '1'; });
                    counter.textContent = imageCount + ' image(s) in grid.';
                };
                reader.readAsDataURL(file);
            });
        });
        uploader.on('taskProgress', function(task) {
            var bars = grid.querySelectorAll('.progress-bar');
            if (bars.length > 0) {
                bars[bars.length - 1].style.width = Math.round(task.percent) + '%';
            }
        });
        uploader.on('taskComplete', function(task) {
            var bars = grid.querySelectorAll('.progress-bar');
            if (bars.length > 0) {
                var lastBar = bars[bars.length - 1];
                lastBar.style.width = '100%';
                lastBar.classList.add('bg-success');
            }
        });
    }
</script>
</asp:Content>
