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

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

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

<div class="demo-card">
    <div class="demo-card-header">Full-Width Banner Layout</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A full-width banner-style uploader that spans the entire container width.
            Great for hero sections or dedicated upload pages.
        </p>

        <style>
            .fullwidth-uploader {
                --cu-primary: #4f46e5;
                --cu-primary-hover: #4338ca;
                width: 100%;
                background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
                border: 2px dashed #a5b4fc;
                border-radius: 0.75rem;
                padding: 2.5rem 1.5rem;
                text-align: center;
                transition: border-color 0.3s;
            }
            .fullwidth-uploader:hover {
                border-color: #6366f1;
            }
            .fullwidth-uploader .ajaxuploader-button {
                font-size: 1.1rem;
                padding: 0.75rem 2.5rem;
            }
            .fullwidth-banner-label {
                display: block;
                margin-bottom: 1rem;
                font-size: 1.25rem;
                font-weight: 600;
                color: #3730a3;
            }
        </style>

        <div class="fullwidth-uploader">
            <span class="fullwidth-banner-label">Drag files here or click to upload</span>
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                AllowMultiple="true"
                ButtonText="Browse Files"
                ShowProgress="true" />
        </div>

        <div class="code-panel">
            <pre><code>&lt;style&gt;
  .fullwidth-uploader {
    width: 100%;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 2px dashed #a5b4fc;
    border-radius: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .fullwidth-uploader:hover { border-color: #6366f1; }
&lt;/style&gt;

&lt;div class="fullwidth-uploader"&gt;
  &lt;span class="fullwidth-banner-label"&gt;
    Drag files here or click to upload
  &lt;/span&gt;
  &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
      AllowMultiple="true"
      ButtonText="Browse Files"
      ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>
