{{> layouts/main title="Compose Email" activeMenu="email" activePage="compose"}}

{{#*inline "content"}}
<div class="dashboard-main-wrapper">
    <!-- Header -->
    {{> layouts/header}}
    
    <!-- Sidebar -->
    {{> layouts/sidebar activeMenu="email" activePage="compose"}}
    
    <!-- Main Content -->
    <div class="dashboard-wrapper">
        <div class="dashboard-email">
            <div class="container-fluid dashboard-content">
                <!-- Page Header -->
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="page-header">
                            <h2 class="pageheader-title">Compose Email</h2>
                            <p class="pageheader-text">Create and send new email messages</p>
                            <div class="page-breadcrumb">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="index.html" class="breadcrumb-link">Dashboard</a></li>
                                        <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Email</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Compose</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Email Interface -->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-body p-0">
                                <div class="email-wrapper">
                                    <div class="row g-0">
                                        <!-- Sidebar -->
                                        <div class="col-lg-3 col-md-4 border-end">
                                            <div class="email-sidebar p-4">
                                                <!-- Compose Button -->
                                                <a href="/pages/email/inbox.html" class="btn btn-outline-secondary btn-lg w-100 mb-4">
                                                    <i class="fas fa-inbox me-2"></i>Back to Inbox
                                                </a>

                                                <!-- Folders -->
                                                <div class="email-folders">
                                                    <h6 class="text-muted text-uppercase small mb-3">Folders</h6>
                                                    <div class="list-group list-group-flush">
                                                        <a href="/pages/email/inbox.html" class="list-group-item list-group-item-action">
                                                            <i class="fas fa-inbox me-2"></i>Inbox
                                                            <span class="badge bg-primary rounded-pill float-end">24</span>
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action">
                                                            <i class="fas fa-star me-2"></i>Starred
                                                            <span class="badge bg-warning rounded-pill float-end">8</span>
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action">
                                                            <i class="fas fa-paper-plane me-2"></i>Sent
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action">
                                                            <i class="fas fa-file-alt me-2"></i>Drafts
                                                            <span class="badge bg-secondary rounded-pill float-end">2</span>
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action">
                                                            <i class="fas fa-trash me-2"></i>Trash
                                                        </a>
                                                    </div>
                                                </div>

                                                <!-- Labels -->
                                                <div class="email-labels mt-4">
                                                    <h6 class="text-muted text-uppercase small mb-3">Labels</h6>
                                                    <div class="list-group list-group-flush">
                                                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                                            <span class="badge bg-success me-2">&nbsp;</span>
                                                            <span>Work</span>
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                                            <span class="badge bg-primary me-2">&nbsp;</span>
                                                            <span>Personal</span>
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                                            <span class="badge bg-warning me-2">&nbsp;</span>
                                                            <span>Important</span>
                                                        </a>
                                                        <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                                            <span class="badge bg-danger me-2">&nbsp;</span>
                                                            <span>Private</span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Compose Form -->
                                        <div class="col-lg-9 col-md-8">
                                            <div class="email-compose p-4">
                                                <form id="composeForm">
                                                    <!-- To Field -->
                                                    <div class="mb-3">
                                                        <label for="toEmail" class="form-label">To:</label>
                                                        <input type="text" class="form-control" id="toEmail" placeholder="Enter recipient email addresses" multiple>
                                                    </div>

                                                    <!-- CC/BCC Fields -->
                                                    <div class="row mb-3">
                                                        <div class="col-md-6">
                                                            <label for="ccEmail" class="form-label">
                                                                CC: 
                                                                <small class="text-muted">(Optional)</small>
                                                            </label>
                                                            <input type="text" class="form-control" id="ccEmail" placeholder="Carbon copy recipients">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="bccEmail" class="form-label">
                                                                BCC: 
                                                                <small class="text-muted">(Optional)</small>
                                                            </label>
                                                            <input type="text" class="form-control" id="bccEmail" placeholder="Blind carbon copy recipients">
                                                        </div>
                                                    </div>

                                                    <!-- Subject -->
                                                    <div class="mb-3">
                                                        <label for="emailSubject" class="form-label">Subject:</label>
                                                        <input type="text" class="form-control" id="emailSubject" placeholder="Enter email subject">
                                                    </div>

                                                    <!-- Email Body -->
                                                    <div class="mb-3">
                                                        <label for="emailBody" class="form-label">Message:</label>
                                                        <div id="emailEditor" class="email-editor"></div>
                                                    </div>

                                                    <!-- Attachments -->
                                                    <div class="mb-4">
                                                        <label class="form-label">Attachments:</label>
                                                        <div class="attachment-area border rounded p-3">
                                                            <div class="text-center">
                                                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                                                <p class="text-muted mb-2">Drag and drop files here or</p>
                                                                <label for="fileAttachment" class="btn btn-outline-primary btn-sm">
                                                                    <i class="fas fa-paperclip me-1"></i>Choose Files
                                                                </label>
                                                                <input type="file" id="fileAttachment" class="d-none" multiple>
                                                                <p class="text-muted small mt-2 mb-0">Maximum file size: 25MB</p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Action Buttons -->
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <button type="button" class="btn btn-outline-secondary">
                                                                <i class="fas fa-trash me-1"></i>Discard
                                                            </button>
                                                            <button type="button" class="btn btn-outline-secondary ms-2">
                                                                <i class="fas fa-save me-1"></i>Save Draft
                                                            </button>
                                                        </div>
                                                        <div>
                                                            <button type="submit" class="btn btn-primary">
                                                                <i class="fas fa-paper-plane me-1"></i>Send Email
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        {{> layouts/footer}}
    </div>
</div>

<!-- Page Specific Scripts -->
<script type="module" src="/js/pages/compose.js"></script>
{{/inline}}

{{> layouts/base}}