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

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

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

<div class="demo-card">
    <div class="demo-card-header">Dark Mode Toggle</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Toggle between light and dark themes by switching a CSS class.
            The uploader respects CSS variable overrides scoped to the dark class.
        </p>

        <style>
            .dark-mode-container {
                padding: 1.5rem;
                border-radius: 0.5rem;
                border: 1px solid #e5e7eb;
                transition: background-color 0.3s, color 0.3s;
            }
            .dark-mode-container.cu-dark {
                --cu-primary: #6366f1;
                --cu-primary-hover: #818cf8;
                --cu-primary-text: #ffffff;
                --cu-bg: #1f2937;
                --cu-text: #f3f4f6;
                --cu-border-color: #374151;
                --cu-progress-bg: #374151;
                --cu-progress-fill: #6366f1;
                background-color: #111827;
                color: #f3f4f6;
            }
            .dark-mode-container:not(.cu-dark) {
                background-color: #ffffff;
            }
            #darkToggle { margin-bottom: 1rem; }
        </style>

        <button type="button" id="darkToggle" class="btn btn-outline-secondary btn-sm">Toggle Dark Mode</button>

        <div id="darkContainer" class="dark-mode-container">
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                AllowMultiple="true"
                ButtonText="Upload Files"
                ShowProgress="true" />
        </div>

        <div class="code-panel">
            <pre><code>.cu-dark {
  --cu-primary: #6366f1;
  --cu-bg: #1f2937;
  --cu-text: #f3f4f6;
  --cu-border-color: #374151;
  background-color: #111827;
  color: #f3f4f6;
}

&lt;button onclick="container.classList.toggle('cu-dark')"&gt;
  Toggle Dark Mode
&lt;/button&gt;
&lt;div id="container"&gt;
  &lt;au:AjaxFileUpload ID="Uploader1" runat="server" /&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    document.getElementById('darkToggle').addEventListener('click', function () {
        document.getElementById('darkContainer').classList.toggle('cu-dark');
        this.textContent = document.getElementById('darkContainer').classList.contains('cu-dark')
            ? 'Switch to Light' : 'Toggle Dark Mode';
    });
</script>
</asp:Content>
