{{> layouts/main title="Email Details" activeMenu="email" activePage="details"}}

{{#*inline "content"}}
<div class="dashboard-main-wrapper">
    <!-- Header -->
    {{> layouts/header}}
    
    <!-- Sidebar -->
    {{> layouts/sidebar activeMenu="email" activePage="details"}}
    
    <!-- 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">Email Details</h2>
                            <p class="pageheader-text">View and manage email message</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">Email Details</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/compose.html" class="btn btn-primary btn-lg w-100 mb-4">
                                                    <i class="fas fa-edit me-2"></i>Compose
                                                </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 active">
                                                            <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>

                                        <!-- Email Details -->
                                        <div class="col-lg-9 col-md-8">
                                            <div class="email-details">
                                                <!-- Email Header -->
                                                <div class="email-header border-bottom p-4">
                                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                                        <h3 class="mb-0">Q4 Product Launch Strategy Meeting</h3>
                                                        <div class="email-actions">
                                                            <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="tooltip" title="Reply">
                                                                <i class="fas fa-reply"></i>
                                                            </button>
                                                            <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="tooltip" title="Reply All">
                                                                <i class="fas fa-reply-all"></i>
                                                            </button>
                                                            <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="tooltip" title="Forward">
                                                                <i class="fas fa-share"></i>
                                                            </button>
                                                            <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="tooltip" title="Star">
                                                                <i class="far fa-star"></i>
                                                            </button>
                                                            <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="Delete">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="email-meta">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <img src="https://placehold.co/48x48/5969ff/ffffff?text=JD&font=montserrat" alt="John Doe" class="rounded-circle me-3" width="48" height="48">
                                                            <div class="flex-grow-1">
                                                                <h5 class="mb-0">John Doe <small class="text-muted">&lt;john.doe@company.com&gt;</small></h5>
                                                                <div class="text-muted small">
                                                                    to me, Sarah Smith, Michael Johnson
                                                                </div>
                                                            </div>
                                                            <div class="text-muted small">
                                                                Oct 25, 2024, 2:30 PM
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="email-labels-inline mt-2">
                                                            <span class="badge bg-success me-1">Work</span>
                                                            <span class="badge bg-warning me-1">Important</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Email Body -->
                                                <div class="email-body p-4">
                                                    <p>Hi Team,</p>
                                                    
                                                    <p>I hope this email finds you well. I wanted to reach out regarding our upcoming Q4 product launch strategy meeting scheduled for next Tuesday.</p>
                                                    
                                                    <p>As we prepare for this important discussion, I've compiled a comprehensive agenda that covers all critical aspects of our launch plan:</p>
                                                    
                                                    <h5 class="mt-4 mb-3">Meeting Agenda:</h5>
                                                    <ol>
                                                        <li class="mb-2">
                                                            <strong>Market Analysis Review</strong> (30 min)
                                                            <ul>
                                                                <li>Current market trends and competitor positioning</li>
                                                                <li>Customer feedback from beta testing</li>
                                                                <li>Pricing strategy recommendations</li>
                                                            </ul>
                                                        </li>
                                                        <li class="mb-2">
                                                            <strong>Product Roadmap Update</strong> (45 min)
                                                            <ul>
                                                                <li>Feature prioritization for launch</li>
                                                                <li>Technical milestones and dependencies</li>
                                                                <li>Risk assessment and mitigation plans</li>
                                                            </ul>
                                                        </li>
                                                        <li class="mb-2">
                                                            <strong>Marketing Campaign Strategy</strong> (45 min)
                                                            <ul>
                                                                <li>Digital marketing initiatives</li>
                                                                <li>Content calendar and social media plan</li>
                                                                <li>Partnership opportunities</li>
                                                            </ul>
                                                        </li>
                                                        <li class="mb-2">
                                                            <strong>Sales Enablement</strong> (30 min)
                                                            <ul>
                                                                <li>Sales team training schedule</li>
                                                                <li>Demo environment setup</li>
                                                                <li>Commission structure updates</li>
                                                            </ul>
                                                        </li>
                                                    </ol>
                                                    
                                                    <p>Please review the attached documents before the meeting:</p>
                                                    
                                                    <div class="email-attachments mt-4 mb-4">
                                                        <h6 class="mb-3">Attachments (3)</h6>
                                                        <div class="row g-2">
                                                            <div class="col-md-4">
                                                                <div class="attachment-item border rounded p-3">
                                                                    <div class="d-flex align-items-center">
                                                                        <i class="fas fa-file-pdf fa-2x text-danger me-3"></i>
                                                                        <div class="flex-grow-1">
                                                                            <h6 class="mb-0 text-truncate">Market_Analysis_Q4.pdf</h6>
                                                                            <small class="text-muted">2.4 MB</small>
                                                                        </div>
                                                                        <button class="btn btn-sm btn-outline-secondary">
                                                                            <i class="fas fa-download"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="attachment-item border rounded p-3">
                                                                    <div class="d-flex align-items-center">
                                                                        <i class="fas fa-file-excel fa-2x text-success me-3"></i>
                                                                        <div class="flex-grow-1">
                                                                            <h6 class="mb-0 text-truncate">Product_Roadmap.xlsx</h6>
                                                                            <small class="text-muted">856 KB</small>
                                                                        </div>
                                                                        <button class="btn btn-sm btn-outline-secondary">
                                                                            <i class="fas fa-download"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="attachment-item border rounded p-3">
                                                                    <div class="d-flex align-items-center">
                                                                        <i class="fas fa-file-powerpoint fa-2x text-warning me-3"></i>
                                                                        <div class="flex-grow-1">
                                                                            <h6 class="mb-0 text-truncate">Launch_Strategy.pptx</h6>
                                                                            <small class="text-muted">4.1 MB</small>
                                                                        </div>
                                                                        <button class="btn btn-sm btn-outline-secondary">
                                                                            <i class="fas fa-download"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <p>If you have any questions or would like to add items to the agenda, please let me know by end of day Monday.</p>
                                                    
                                                    <p>Looking forward to our discussion!</p>
                                                    
                                                    <p>Best regards,<br>
                                                    John Doe<br>
                                                    Product Manager<br>
                                                    Company Inc.</p>
                                                </div>

                                                <!-- Reply Section -->
                                                <div class="email-reply border-top p-4">
                                                    <h5 class="mb-3">Quick Reply</h5>
                                                    <form id="replyForm">
                                                        <div class="mb-3">
                                                            <textarea class="form-control" rows="4" placeholder="Type your reply here..."></textarea>
                                                        </div>
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <div>
                                                                <button type="button" class="btn btn-sm btn-outline-secondary me-2">
                                                                    <i class="fas fa-paperclip"></i> Attach
                                                                </button>
                                                                <button type="button" class="btn btn-sm btn-outline-secondary">
                                                                    <i class="fas fa-image"></i> Insert Image
                                                                </button>
                                                            </div>
                                                            <div>
                                                                <button type="button" class="btn btn-outline-secondary me-2">Cancel</button>
                                                                <button type="submit" class="btn btn-primary">
                                                                    <i class="fas fa-paper-plane me-1"></i>Send Reply
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        {{> layouts/footer}}
    </div>
</div>

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

{{> layouts/base}}