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

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

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

<div class="demo-card">
    <div class="demo-card-header">Individual Progress Per File</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Track upload progress independently for each file. Every file gets its
            own progress bar and status indicator in a custom file list.
        </p>

        <style>
            #fileList { margin-top: 1rem; }
            .file-item {
                display: flex; align-items: center; gap: 0.75rem;
                padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6;
            }
            .file-item-name {
                flex: 1; font-size: 0.85rem; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap;
            }
            .file-item-bar {
                width: 120px; height: 8px;
                background: #e5e7eb; border-radius: 4px; overflow: hidden;
            }
            .file-item-fill {
                height: 100%; width: 0%; background: #3b82f6;
                border-radius: 4px; transition: width 0.2s;
            }
            .file-item-pct { font-size: 0.75rem; width: 40px; text-align: right; color: #6b7280; }
        </style>

        <div id="perFileUploader"></div>
        <div id="fileList"></div>

        <div class="code-panel">
            <pre><code>onTaskStart: function(task) {
  // create a row with its own progress bar
  list.appendChild(createFileRow(task));
},
onTaskProgress: function(task, pct) {
  var row = document.getElementById('file-' + task.id);
  row.querySelector('.fill').style.width = pct + '%';
  row.querySelector('.pct').textContent = Math.round(pct) + '%';
},
onTaskComplete: function(task) {
  row.querySelector('.fill').style.background = '#10b981';
}</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var list = document.getElementById('fileList');
        AjaxUploader.create(document.getElementById('perFileUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            onTaskStart: function (task) {
                var item = document.createElement('div');
                item.className = 'file-item';
                item.id = 'file-' + task.id;
                item.innerHTML = '<span class="file-item-name">' + task.fileName + '</span>'
                    + '<div class="file-item-bar"><div class="file-item-fill"></div></div>'
                    + '<span class="file-item-pct">0%</span>';
                list.appendChild(item);
            },
            onTaskProgress: function (task, pct) {
                var item = document.getElementById('file-' + task.id);
                if (item) {
                    item.querySelector('.file-item-fill').style.width = pct + '%';
                    item.querySelector('.file-item-pct').textContent = Math.round(pct) + '%';
                }
            },
            onTaskComplete: function (task) {
                var item = document.getElementById('file-' + task.id);
                if (item) {
                    item.querySelector('.file-item-fill').style.background = '#10b981';
                    item.querySelector('.file-item-pct').textContent = 'Done';
                }
            }
        });
    })();
</script>
</asp:Content>
