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

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

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

<style>
    .file-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
    .file-card {
        width: 180px; padding: 14px; border: 1px solid #e2e8f0;
        border-radius: 10px; background: #f8fafc; text-align: center;
    }
    .file-card .icon { font-size: 2rem; color: #64748b; }
    .file-card .name { font-size: 0.8rem; margin-top: 6px; word-break: break-all; }
    .file-card .size { font-size: 0.7rem; color: #94a3b8; }
    .file-card.done { border-color: #22c55e; }
</style>

<div class="demo-card">
    <div class="demo-card-header">Card-Based File List</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Display uploaded files as styled cards instead of a list. Each card shows an
            icon, file name, size, and a status indicator.
        </p>

        <div id="cardUploader"></div>
        <div class="file-cards" id="fileCards"></div>

        <div class="code-panel">
            <pre><code>onSelect: function (file) {
    var card = document.createElement('div');
    card.className = 'file-card';
    card.innerHTML = '&lt;div class="icon"&gt;&amp;#128196;&lt;/div&gt;'
        + '&lt;div class="name"&gt;' + file.name + '&lt;/div&gt;'
        + '&lt;div class="size"&gt;' + (file.size/1024).toFixed(1) + ' KB&lt;/div&gt;';
    container.appendChild(card);
},
onComplete: function (file) {
    // Mark card as done
    card.classList.add('done');
}</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    AjaxUploader.create(document.getElementById('cardUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        autoUpload: true,
        onSelect: function (file) {
            var card = document.createElement('div');
            card.className = 'file-card';
            card.id = 'card-' + file.name.replace(/\W/g, '_');
            card.innerHTML = '<div class="icon">&#128196;</div>' +
                '<div class="name">' + file.name + '</div>' +
                '<div class="size">' + (file.size / 1024).toFixed(1) + ' KB</div>';
            document.getElementById('fileCards').appendChild(card);
        },
        onComplete: function (file) {
            var card = document.getElementById('card-' + file.name.replace(/\W/g, '_'));
            if (card) card.classList.add('done');
        }
    });
</script>
</asp:Content>
