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

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

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

<div class="demo-card">
    <div class="demo-card-header">Bootstrap Theme</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Style the uploader with Bootstrap classes for seamless integration with Bootstrap-based
            applications. Use the JavaScript API for full control over markup and CSS classes.
        </p>

        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Upload Documents</h6>
                <div id="bsUploader"></div>
                <div id="bsProgress" class="progress mt-2" style="height: 6px; display: none;">
                    <div id="bsProgressBar" class="progress-bar bg-success" style="width: 0%"></div>
                </div>
                <div id="bsFileList" class="list-group mt-2"></div>
                <div id="bsStatus" class="mt-2"></div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(element, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    autoUpload: true,
    buttonText: 'Choose Files',
    buttonClass: 'btn btn-primary',
    onSelect: function (file) {
        // Add Bootstrap list-group-item
    },
    onProgress: function (file, percent) {
        // Update Bootstrap progress bar
        progressBar.style.width = percent + '%';
    },
    onComplete: function (file) {
        // Update badge to "Uploaded"
    },
    onError: function (file, error) {
        // Show Bootstrap alert
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var progressEl = document.getElementById('bsProgress');
        var progressBar = document.getElementById('bsProgressBar');
        var fileList = document.getElementById('bsFileList');
        var statusEl = document.getElementById('bsStatus');

        AjaxUploader.create(document.getElementById('bsUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            buttonText: 'Choose Files',
            buttonClass: 'btn btn-primary',
            onSelect: function (file) {
                var item = document.createElement('div');
                item.className = 'list-group-item d-flex justify-content-between align-items-center';
                item.id = 'file-' + file.name.replace(/\W/g, '_');
                item.innerHTML = file.name +
                    ' <span class="badge bg-secondary">' +
                    (file.size / 1024).toFixed(1) + ' KB</span>';
                fileList.appendChild(item);
            },
            onProgress: function (file, percent) {
                progressEl.style.display = '';
                progressBar.style.width = percent + '%';
            },
            onComplete: function (file) {
                progressEl.style.display = 'none';
                progressBar.style.width = '0%';
                var item = document.getElementById('file-' + file.name.replace(/\W/g, '_'));
                if (item) {
                    item.querySelector('.badge').className = 'badge bg-success';
                    item.querySelector('.badge').textContent = 'Uploaded';
                }
            },
            onError: function (file, error) {
                statusEl.innerHTML = '<div class="alert alert-danger py-1">' + error + '</div>';
            }
        });
    });
</script>
</asp:Content>
