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

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">CMS Media Library - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">CMS Media Library Upload</asp:Content>

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

<style>
    .media-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .media-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px; min-height: 100px; background: #f9fafb; border: 1px dashed #d1d5db;
        border-radius: 8px; padding: 12px;
    }
    .media-item {
        text-align: center; padding: 12px 6px; background: #fff;
        border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.75rem;
        word-break: break-all;
    }
    .media-item .icon { font-size: 1.8rem; margin-bottom: 4px; }
</style>

<div class="demo-card">
    <div class="demo-card-header">CMS Media Library Upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A media library interface for a content management system. Upload images and
            documents, then browse them in a grid with file type icons.
        </p>

        <div class="media-toolbar">
            <strong>Media Library</strong>
            <div id="cmsUploader"></div>
        </div>
        <div class="media-grid" id="mediaGrid">
            <div class="media-item"><div class="icon">&#128444;</div>banner.jpg</div>
            <div class="media-item"><div class="icon">&#128196;</div>terms.pdf</div>
        </div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(el, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    autoUpload: true,
    onComplete: function (file) {
        var ext = file.name.split('.').pop().toLowerCase();
        var icon = isImage(ext) ? 'image-icon' : 'doc-icon';
        mediaGrid.appendChild(createMediaItem(icon, file.name));
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    AjaxUploader.create(document.getElementById('cmsUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        autoUpload: true,
        onComplete: function (file) {
            var ext = file.name.split('.').pop().toLowerCase();
            var icon = ['jpg','jpeg','png','gif','webp'].indexOf(ext) >= 0 ? '&#128444;' : '&#128196;';
            var item = document.createElement('div');
            item.className = 'media-item';
            item.innerHTML = '<div class="icon">' + icon + '</div>' + file.name;
            document.getElementById('mediaGrid').appendChild(item);
        }
    });
</script>
</asp:Content>
