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

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

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

<div class="demo-card">
    <div class="demo-card-header">Modal Uploader</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Open a file uploader inside a Bootstrap modal dialog. The uploader initializes
            when the modal is shown and uploads work normally within the overlay.
        </p>

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
            Open Upload Dialog
        </button>

        <div class="modal fade" id="uploadModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Upload Files</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="modalUploader"></div>
                        <div id="modalStatus" class="mt-2 small text-muted"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>// Initialize uploader when modal opens
modalEl.addEventListener('shown.bs.modal', function () {
    AjaxUploader.create(document.getElementById('modalUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        autoUpload: true,
        onComplete: function (file) {
            statusEl.textContent = 'Uploaded: ' + file.name;
        }
    });
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var modalEl = document.getElementById('uploadModal');
    var initialized = false;
    modalEl.addEventListener('shown.bs.modal', function () {
        if (initialized) return;
        initialized = true;
        AjaxUploader.create(document.getElementById('modalUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            onComplete: function (file) {
                document.getElementById('modalStatus').textContent = 'Uploaded: ' + file.name;
            }
        });
    });
</script>
</asp:Content>
