<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Design Reviews & Feedback"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "Email"; $title = "Email Details"; include('./partials/page-title.php'); ?>

                    <div class="outlook-box email-app">
                        <div class="offcanvas-lg offcanvas-start outlook-left-menu outlook-left-menu-sm" tabindex="-1" id="emailSidebaroffcanvas">
                            <div class="card h-100 mb-0 rounded-end-0" data-simplebar>
                                <div class="card-body">
                                    <a href="apps-email-compose.php" class="btn btn-danger fw-medium w-100">Compose</a>

                                    <div class="list-group list-group-flush list-custom mt-3">
                                        <a href="apps-email-inbox.php" class="list-group-item list-group-item-action active">
                                            <i class="ti ti-inbox me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Inbox</span>
                                            <span class="badge align-middle bg-danger-subtle fs-xxs text-danger float-end">21</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-send-2 me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Sent</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-star me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Starred</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-clock me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Scheduled</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-pencil me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Drafts</span>
                                            <span class="badge align-middle bg-secondary-subtle text-secondary fs-xxs float-end">9</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-alert-circle me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Important</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-ban me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Spam</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-trash me-1 opacity-75 fs-lg align-middle"></i>
                                            <span class="align-middle">Trash</span>
                                        </a>

                                        <div class="list-group-item mt-2">
                                            <span class="align-middle">Labels</span>
                                        </div>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-chart-donut me-1 align-middle fs-sm text-primary"></i>
                                            <span class="align-middle">Business</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-chart-donut me-1 align-middle fs-sm text-secondary"></i>
                                            <span class="align-middle">Personal</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-chart-donut me-1 align-middle fs-sm text-info"></i>
                                            <span class="align-middle">Friends</span>
                                        </a>

                                        <a href="javascript: void(0);" class="list-group-item list-group-item-action">
                                            <i class="ti ti-chart-donut me-1 align-middle fs-sm text-warning"></i>
                                            <span class="align-middle">Family</span>
                                        </a>
                                    </div>
                                </div>
                                <!-- end card-body-->
                            </div>
                            <!-- end card-->
                        </div>

                        <div class="card h-100 mb-0 rounded-start-0 flex-grow-1 border-start-0">
                            <div class="card-header d-lg-none d-flex gap-2">
                                <button class="btn btn-default btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas">
                                    <i class="ti ti-menu-4 fs-lg"></i>
                                </button>

                                <div class="app-search">
                                    <input type="text" class="form-control" placeholder="Search mails..." />
                                    <i class="ti ti-search app-search-icon text-muted"></i>
                                </div>
                            </div>

                            <div class="card-header card-bg justify-content-between">
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <!-- Back to Inbox -->
                                    <a href="apps-email-inbox.php" class="btn btn-default btn-icon btn-sm" data-bs-toggle="tooltip" title="Back to Inbox">
                                        <i class="ti ti-arrow-left fs-lg"></i>
                                    </a>

                                    <!-- Delete -->
                                    <button type="button" class="btn btn-default btn-icon btn-sm" data-bs-toggle="tooltip" title="Delete">
                                        <i class="ti ti-trash fs-lg"></i>
                                    </button>

                                    <!-- Mark as Read -->
                                    <button type="button" class="btn btn-default btn-icon btn-sm" data-bs-toggle="tooltip" title="Mark as Read">
                                        <i class="ti ti-mail-opened fs-lg"></i>
                                    </button>

                                    <!-- Archive -->
                                    <button type="button" class="btn btn-default btn-icon btn-sm" data-bs-toggle="tooltip" title="Archive">
                                        <i class="ti ti-archive fs-lg"></i>
                                    </button>

                                    <!-- Move to Folder -->
                                    <button type="button" class="btn btn-default btn-icon btn-sm" data-bs-toggle="tooltip" title="Move to Folder">
                                        <i class="ti ti-folder fs-lg"></i>
                                    </button>
                                </div>

                                <div class="d-flex align-items-center gap-1">
                                    <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary rounded-circle">
                                        <i class="ti ti-corner-up-right-double fs-xl"></i>
                                    </button>

                                    <button type="button" class="btn btn-icon btn-sm btn-ghost-dark rounded-circle">
                                        <i class="ti ti-dots-vertical fs-lg"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="card-body pt-0 pb-5" style="height: calc(100% - 100px)" data-simplebar data-simplebar-md>
                                <h4 class="py-3 mb-0 sticky-top bg-body-secondary">Design Reviews & Feedback</h4>

                                <!-- Email One -->
                                <div class="pb-3">
                                    <div class="d-flex align-items-center">
                                        <a class="d-flex align-items-center flex-grow-1 text-reset" data-bs-toggle="collapse" href="#EmailOne" role="button" aria-expanded="false" aria-controls="EmailOne">
                                            <img src="assets/images/users/user-3.jpg" class="avatar-md rounded-circle" alt="User Avatar" />
                                            <div class="ms-2 overflow-hidden">
                                                <h5 class="fs-sm mb-0 text-truncate">John Maxwell</h5>
                                                <p class="text-muted mb-0 text-truncate">john.maxwell@uxstudio.com</p>
                                            </div>
                                        </a>
                                        <div class="ms-auto d-flex align-items-center gap-1">
                                            <button class="btn btn-icon btn-sm btn-ghost-light rounded-circle">
                                                <i class="ti ti-star-filled text-warning fs-lg"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-ghost-light text-dark rounded-circle">
                                                <i class="ti ti-mail-forward fs-lg"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-ghost-light text-dark rounded-circle">
                                                <i class="ti ti-mail-opened fs-lg"></i>
                                            </button>
                                            <span class="text-muted fs-xs mb-0 ms-2">Apr 11, 07:47 AM</span>
                                        </div>
                                    </div>

                                    <div class="collapse" id="EmailOne">
                                        <div class="mt-3">
                                            <p>Hey team,</p>
                                            <p>I reviewed the new dashboard layout and overall it's looking solid. The spacing and typography are much better than the previous version.</p>
                                            <p>A couple of suggestions:</p>
                                            <ul>
                                                <li>Make the chart legends slightly smaller and lighter in color.</li>
                                                <li>Try a softer drop shadow for the card components – they feel a bit harsh right now.</li>
                                            </ul>
                                            <p>Let me know if you need a quick call to discuss.</p>
                                            <p class="mt-3 mb-0">Cheers,</p>
                                            <p class="fw-medium mb-0">John</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Email Two -->
                                <div class="py-3 border-top border-dashed">
                                    <div class="d-flex align-items-center">
                                        <a class="d-flex align-items-center flex-grow-1 text-reset" data-bs-toggle="collapse" href="#EmailThree" role="button" aria-expanded="false" aria-controls="EmailThree">
                                            <img src="assets/images/users/user-6.jpg" class="avatar-md rounded-circle" alt="User Avatar" />
                                            <div class="ms-2 overflow-hidden">
                                                <h5 class="fs-sm mb-0 text-truncate">Anika Patel</h5>
                                                <p class="text-muted mb-0 text-truncate">anika@creativemix.net</p>
                                            </div>
                                        </a>
                                        <div class="ms-auto d-flex align-items-center gap-1">
                                            <button class="btn btn-icon btn-sm btn-ghost-light rounded-circle">
                                                <i class="ti ti-star-filled text-warning fs-lg"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-ghost-light text-dark rounded-circle">
                                                <i class="ti ti-mail-forward fs-lg"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-ghost-light text-dark rounded-circle">
                                                <i class="ti ti-mail-opened fs-lg"></i>
                                            </button>
                                            <span class="text-muted fs-xs mb-0 ms-2">Apr 11, 09:05 AM</span>
                                        </div>
                                    </div>

                                    <div class="collapse" id="EmailThree">
                                        <div class="mt-3">
                                            <p>Hello team,</p>
                                            <p>I did a final check on the landing page animations. Everything works smoothly except the testimonial slider – there's a tiny jitter on loop transition.</p>
                                            <p>Maybe easing timing or delay tweaks can help fix it. Otherwise, great job!</p>
                                            <p>Let me know once it's deployed to staging so I can do one last run-through.</p>
                                            <p class="mt-3 mb-0">Thanks,</p>
                                            <p class="fw-medium mb-0">Anika</p>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex justify-content-between mt-3">
                                                <h4 class="fs-sm text-muted">1 Attachment</h4>
                                            </div>
                                            <div class="mt-2 d-flex flex-wrap gap-3">
                                                <div class="d-flex p-2 gap-2 align-items-center text-start position-relative border border-dashed rounded">
                                                    <i class="ti ti-video fs-24 text-primary"></i>
                                                    <div>
                                                        <h4 class="fs-sm mb-1">
                                                            <a href="#!" class="link-reset stretched-link">testimonial-glitch.mp4</a>
                                                        </h4>
                                                        <p class="fs-xs mb-0">4.7 MB</p>
                                                    </div>
                                                    <i class="ti ti-download fs-24 text-muted"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Email Three -->
                                <div class="py-3 border-top border-dashed">
                                    <div class="d-flex align-items-center">
                                        <a class="d-flex align-items-center flex-grow-1 text-reset" data-bs-toggle="collapse" href="#EmailTwo" role="button" aria-expanded="false" aria-controls="EmailTwo">
                                            <img src="assets/images/users/user-5.jpg" class="avatar-md rounded-circle" alt="User Avatar" />
                                            <div class="ms-2 overflow-hidden">
                                                <h5 class="fs-sm mb-0 text-truncate">Laura Chen</h5>
                                                <p class="text-muted mb-0 text-truncate">laura.chen@designteam.co</p>
                                            </div>
                                        </a>
                                        <div class="ms-auto d-flex align-items-center gap-1">
                                            <button class="btn btn-icon btn-sm btn-ghost-light rounded-circle">
                                                <i class="ti ti-star-filled text-warning fs-lg"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-ghost-light text-dark rounded-circle">
                                                <i class="ti ti-mail-forward fs-lg"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-ghost-light text-dark rounded-circle">
                                                <i class="ti ti-mail-opened fs-lg"></i>
                                            </button>
                                            <span class="text-muted fs-xs mb-0 ms-2">Apr 12, 11:42 AM</span>
                                        </div>
                                    </div>

                                    <div class="collapse show" id="EmailTwo">
                                        <div class="mt-lg-4 mt-3">
                                            <p>Hi folks,</p>
                                            <p>Thanks for sharing the prototype. The color scheme and layout look clean, but I think we can still refine the mobile responsiveness on the pricing page.</p>
                                            <p>Also, the button contrast on the footer needs more WCAG-friendly contrast – it's currently a bit hard to read.</p>
                                            <p>I’ve attached some screenshots with markup for clarity.</p>
                                            <p class="mt-3 mb-0">Regards,</p>
                                            <p class="fw-medium">Laura</p>
                                        </div>

                                        <div class="mt-3">
                                            <div class="d-flex justify-content-between mt-3">
                                                <h4 class="fs-sm text-muted">2 Attachments</h4>
                                            </div>
                                            <div class="mt-2 d-flex flex-wrap gap-3">
                                                <div class="d-flex p-2 gap-2 align-items-center text-start position-relative border border-dashed rounded">
                                                    <i class="ti ti-file fs-24 text-danger"></i>
                                                    <div>
                                                        <h4 class="fs-sm mb-1">
                                                            <a href="#!" class="link-reset stretched-link">footer-contrast-notes.pdf</a>
                                                        </h4>
                                                        <p class="fs-xs mb-0">1.2 MB</p>
                                                    </div>
                                                    <i class="ti ti-download fs-24 text-muted"></i>
                                                </div>
                                                <div class="d-flex p-2 gap-3 align-items-center text-start position-relative border border-dashed rounded">
                                                    <i class="ti ti-photo fs-24 text-secondary"></i>
                                                    <div>
                                                        <h4 class="fs-sm mb-1">
                                                            <a href="#!" class="link-reset stretched-link">responsive-issues.png</a>
                                                        </h4>
                                                        <p class="fs-xs mb-0">850 KB</p>
                                                    </div>
                                                    <i class="ti ti-download fs-24 text-muted"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Reply Box -->
                                <div class="position-sticky bottom-0 z-1">
                                    <div class="collapse" id="EmailReply">
                                        <div class="mt-2 pb-5">
                                            <textarea class="form-control rounded-top rounded-0" id="exampleFormControlTextarea1" rows="6" placeholder="Enter message"></textarea>
                                            <div class="bg-light-subtle p-2 rounded-bottom border border-top-0">
                                                <div class="d-flex gap-1 align-items-center">
                                                    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Bold">
                                                        <i class="ti ti-bold"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Italic">
                                                        <i class="ti ti-italic"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Attach files">
                                                        <i class="ti ti-paperclip"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Insert link">
                                                        <i class="ti ti-link"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Insert photo">
                                                        <i class="ti ti-photo-up"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-light ms-auto" data-bs-toggle="collapse" data-bs-target="#EmailReply">
                                                        <i class="ti ti-x me-1"></i>
                                                        Cancel
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-success">
                                                        <i class="ti ti-send-2 me-1"></i>
                                                        Send
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end card-body -->

                            <div class="card-header bg-body-secondary border-top border-dashed border-bottom-0 position-absolute bottom-0 w-100">
                                <div class="d-flex flex-wrap align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-2">
                                        <button class="btn btn-sm btn-default" data-bs-toggle="collapse" data-bs-target="#EmailReply" aria-expanded="false" aria-controls="EmailReply" type="button">
                                            <i class="ti ti-corner-up-left fs-lg"></i>
                                            <span class="fw-medium ms-1">Reply</span>
                                        </button>

                                        <button class="btn btn-sm btn-default" type="button">
                                            <i class="ti ti-corner-up-right-double fs-lg"></i>
                                            <span class="fw-medium ms-1">Forward</span>
                                        </button>

                                        <button class="btn btn-sm btn-default" type="button">
                                            <i class="ti ti-printer fs-lg"></i>
                                            <span class="fw-medium ms-1">Print</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end card-->
                    </div>
                    <!-- end row-->
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>
    </body>
</html>
