<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "System Mail Read";
    include('partials/app-meta-title.php') ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <div class="main-content d-flex layout-trimmed">

                        <!-- notice the utilities added to the wrapper below -->
                        <div class="d-flex flex-grow-1 p-0 w-100">
                            <!-- left slider panel : must have unique ID-->
                            <div id="js-slide-left" class="flex-wrap flex-shrink-0 position-relative slide-on-mobile slide-on-mobile-left">
                                <div class="position-absolute top-0 bottom-0 w-100">
                                    <div class="d-flex h-100 flex-column px-2">
                                        <div class="px-4 py-3 align-items-center">
                                            <div class="btn-group btn-group-sm w-100" role="group" aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-danger fs-lg waves-effect waves-themed" data-bs-toggle="modal" data-bs-target="#default-example-modal-lg-center">Compose</button>
                                                <div class="btn-group" role="group">
                                                    <button id="btnGroupDrop1" type="button" class="btn btn-danger dropdown-toggle px-2 js-waves-off" data-bs-toggle="dropdown" aria-expanded="false"></button>
                                                    <div class="dropdown-menu p-0" aria-labelledby="btnGroupDrop1">
                                                        <a class="dropdown-item" href="#">Work group A</a>
                                                        <a class="dropdown-item" href="#">New page</a>
                                                        <a class="dropdown-item" href="#">Edit signature</a>
                                                        <div class="dropdown-divider m-0"></div>
                                                        <a class="dropdown-item" href="#"><i class="fas fa-plus width-1"></i> Add more</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 px-4">
                                            <a class="dropdown-item d-flex justify-content-between rounded-pill p-2" href="systemmail.php">
                                                <div>
                                                    <i class="fas fa-folder-open width-1"></i>Inbox
                                                </div>
                                                <div class="fw-normal badge bg-primary align-self-center rounded-circle if-empty-display-none">7</div>
                                            </a>
                                            <a class="dropdown-item d-flex justify-content-between rounded-pill p-2" href="systemmail.php">
                                                <div>
                                                    <i class="fas fa-star width-1"></i>Starred
                                                </div>
                                                <div class="fw-normal badge bg-primary align-self-center rounded-circle if-empty-display-none"></div>
                                            </a>
                                            <a class="dropdown-item d-flex justify-content-between rounded-pill p-2" href="systemmail.php">
                                                <div>
                                                    <i class="fas fa-edit width-1"></i>Drafts
                                                </div>
                                                <div class="fw-normal badge bg-primary align-self-center rounded-circle if-empty-display-none">5</div>
                                            </a>
                                            <a class="dropdown-item d-flex justify-content-between rounded-pill p-2" href="systemmail.php">
                                                <div>
                                                    <i class="fas fa-paper-plane width-1"></i>Sent
                                                </div>
                                                <div class="fw-normal badge bg-primary align-self-center rounded-circle if-empty-display-none"></div>
                                            </a>
                                            <a class="dropdown-item d-flex justify-content-between rounded-pill p-2" href="systemmail.php">
                                                <div>
                                                    <i class="fas fa-trash width-1"></i>Trash
                                                </div>
                                                <div class="fw-normal badge bg-primary align-self-center rounded-circle if-empty-display-none"></div>
                                            </a>
                                            <a class="dropdown-item d-flex justify-content-between rounded-pill p-2" href="systemmail.php">
                                                <div>
                                                    <i class="fas fa-exclamation-triangle width-1"></i>Junk
                                                </div>
                                                <div class="fw-normal badge bg-primary align-self-center rounded-circle if-empty-display-none"></div>
                                            </a>
                                        </div>
                                        <div class="px-4 fs-xs py-3 fw-300"> 1.5 GB (10%) of 15 GB used <div class="progress mt-1" style="height: 7px;">
                                                <div class="progress-bar bg-primary" role="progressbar" style="width: 11%;" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- left slider panel backdrop : activated on mobile, must be place immideately after left slider closing tag -->
                            <div class="slide-backdrop" data-action="toggle-swap" data-toggleclass="slide-on-mobile-left-show" data-target="#js-slide-left"></div>
                            <!-- middle content area -->
                            <div class="d-flex flex-column flex-grow-1 flex-0 overflow-x-auto">
                                <div class="flex-grow-0">
                                    <!-- end inbox title -->
                                    <!-- inbox button shortcut -->
                                    <div class="d-flex flex-wrap align-items-center ps-2 pe-1 ps-sm-2 py-2 px-sm-4 border border-top-0 border-start-0 border-end-0">
                                        <div class="flex-1 d-flex align-items-center gap-1">
                                            <a href="systemmail.php" class="btn btn-icon rounded-circle me-2 me-lg-2">
                                                <i class="fas fa-arrow-left fs-lg"></i>
                                            </a>
                                            <button type="button" class="btn btn-icon rounded-circle">
                                                <i class="fas fa-redo fs-md"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon rounded-circle">
                                                <i class="fas fa-exclamation-circle fs-md"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon rounded-circle">
                                                <i class="fas fa-trash fs-md"></i>
                                            </button>
                                        </div>
                                        <div class="text-muted me-1 me-lg-3 ms-auto hidden-mobile"> 1 - 50 <span class="hidden-lg-down"> of 135 </span>
                                        </div>
                                        <div class="d-flex flex-wrap hidden-mobile">
                                            <button type="button" class="btn btn-icon rounded-circle"><i class="fas fa-chevron-left"></i></button>
                                            <button type="button" class="btn btn-icon rounded-circle"><i class="fas fa-chevron-right"></i></button>
                                        </div>
                                    </div>
                                    <!-- end inbox button shortcut -->
                                </div>
                                <div class="d-flex align-items-center ps-2 pe-3 py-3 ps-sm-3 pe-sm-4 py-sm-4 pe-lg-4 px-lg-6 py-lg-3 flex-shrink-0 gap-2">
                                    <!-- button for mobile -->
                                    <button type="button" class="pl-3 pr-3 py-2 d-flex d-lg-none align-items-center justify-content-center btn waves-effect waves-themed" data-action="toggle-swap" data-toggleclass="slide-on-mobile-left-show" data-target="#js-slide-left">
                                        <i class="fal fa-ellipsis-v h1 mb-0 "></i>
                                    </button>
                                    <!-- end button for mobile -->
                                    <h5 class="mb-0 ms-1 ms-lg-3 me-auto"> Re: New security codes </h5>
                                    <span class="badge bg-primary hidden-mobile align-self-center">INBOX</span>
                                    <div class="d-flex position-relative">
                                        <a href="#" title="starred" class="btn btn-icon rounded-circle fs-lg">
                                            <svg class="sa-icon sa-medium">
                                                <use href="/public/icons/sprite.svg#star"></use>
                                            </svg>
                                        </a>
                                        <a href="javascript:void(0);" class="btn btn-icon rounded-circle fs-lg" data-bs-toggle="collapse" data-bs-target=".js-collapse" aria-expanded="true">
                                            <i class="fas fa-arrows-v"></i>
                                        </a>
                                        <button type="button" class="btn btn-icon rounded-circle fs-lg hidden-mobile">
                                            <i class="fas fa-print"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="flex-grow-1 position-relative">
                                    <!-- message 1 -->
                                    <div id="msg-01" class="d-flex flex-column border-faded border-top-0 border-end-0 border-start-0 py-3 px-3 px-sm-4 px-lg-0 me-0 me-lg-4 flex-shrink-0">
                                        <div class="d-flex align-items-center flex-row">
                                            <div class="ms-0 me-3 mx-lg-3">
                                                <img src="/public/img/demo/avatars/avatar-c.png" class="profile-image profile-image-md rounded-circle" alt="Melissa Ayre">
                                            </div>
                                            <div class="fw-500 flex-grow-1 flex-shrink-0 d-flex flex-column cursor-pointer" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#msg-01 > .js-collapse">
                                                <div class="fs-lg"> Melissa Ayre <span class="fs-nano text-muted opacity-75 fw-400 text-truncate width-xs">&lt;melissaa@example.com&gt;</span>
                                                </div>
                                                <div class="fs-nano text-muted opacity-75"> to Me</div>
                                            </div>
                                            <div class="text-muted fs-sm "> 1:00 AM <span class="hidden-mobile">(12 hours ago)</span>
                                            </div>
                                            <div class="collapsed-reveal">
                                                <a href="javascript:void(0);" class="btn btn-icon fs-lg rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-reply"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="js-collapse collapse show">
                                            <div class="ps-lg-3 ms-lg-6 pt-3 pb-4 fs-md">
                                                We've taken customer feedback on board and are pleased to announce that the the industry's
                                                most recommended and secure option for Two-Factor Authentication (2FA) is now available to
                                                use on our site. So, if you've tried our previous 2FA methods and have not been convinced,
                                                why not try our new Time-Based One-Time Password (TOTP)? It's super easy to use, and it works
                                                with many third-party 2FA apps you might already have on your phone. We're positive you'll love
                                                the new improved experience.
                                            </div>
                                            <div class="ps-lg-3 ms-lg-6 pt-3 pb-4">
                                                <i class="fs-sm text-muted">Attachments:</i>
                                                <div class="d-flex flex-wrap align-items-center gap-2 py-3 position-relative if-empty-display-none">
                                                    <div class="alert m-0 p-0 badge bg-primary-50 border-primary ps-2"> security_codes.pdf <button data-bs-dismiss="alert" class="btn btn-icon btn-xs ms-1 rounded-0 border border-primary border-top-0 border-bottom-0 border-end-0 waves-effect waves-themed">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </div>
                                                    <div class="alert m-0 p-0 badge bg-primary-50 border-primary ps-2"> agreement.pdf <button data-bs-dismiss="alert" class="btn btn-icon btn-xs ms-1 rounded-0 border border-primary border-top-0 border-bottom-0 border-end-0 waves-effect waves-themed">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </div>
                                                    <a href="#" class="fs-xs text-secondary">show 3 more</a>
                                                </div>
                                                <div class="fs-sm d-flex align-items-center gap-2">
                                                    <a href="#" title="Cell A-0012">
                                                        <span class="d-block img-share" style="background-image:url('img/thumbs/pic-7.png'); background-size: cover;"></span>
                                                    </a>
                                                    <a href="#" title="Patient A-473 saliva">
                                                        <span class="d-block img-share" style="background-image:url('img/thumbs/pic-8.png'); background-size: cover;"></span>
                                                    </a>
                                                    <a href="#" title="Patient A-473 Membrane O.C">
                                                        <span class="d-block img-share" style="background-image:url('img/thumbs/pic-12.png'); background-size: cover;"></span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- message 2 -->
                                    <div id="msg-02" class="d-flex flex-column border-faded border-top-0 border-end-0 border-start-0 py-3 px-3 px-sm-4 px-lg-0 me-0 me-lg-4 flex-shrink-0">
                                        <div class="d-flex align-items-center flex-row">
                                            <div class="ms-0 me-3 mx-lg-3">
                                                <img src="/public/img/demo/avatars/avatar-admin.png" class="profile-image profile-image-md rounded-circle" alt="Sunny A.">
                                            </div>
                                            <div class="fw-500 flex-grow-1 flex-shrink-0 d-flex flex-column cursor-pointer" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#msg-02 > .js-collapse">
                                                <div class="fs-lg"> Sunny A. <span class="fs-nano text-muted opacity-75 fw-400 text-truncate width-xs">me</span>
                                                </div>
                                                <div class="fs-nano text-muted opacity-75"> to &lt;melissa.ayre@getwebora.com&gt;</div>
                                            </div>
                                            <div class="text-muted fs-sm "> 1:00 AM <span class="hidden-mobile">(12 hours ago)</span>
                                            </div>
                                            <div class="collapsed-reveal">
                                                <a href="javascript:void(0);" class="btn btn-icon fs-lg rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-reply"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="js-collapse collapse show">
                                            <div class="ps-lg-3 ms-lg-6 pt-3 pb-4 fs-md">
                                                We've taken customer feedback on board and are pleased to announce that the the industry's most recommended and secure option for Two-Factor Authentication (2FA) is now available to use on our site.
                                                So, if you've tried our previous 2FA methods and have not been convinced, why not try our new Time-Based One-Time Password (TOTP)? It's super easy to use, and it works with many third-party 2FA apps you might already have on your phone. We're positive you'll love the new improved experience.
                                                <br>
                                                <br>
                                                Best,
                                                <br>
                                                <span class="fw-500 fs-lg d-block l-h-n">Sunny A.</span>
                                                <span class="fw-400 fs-nano d-block l-h-n mb-1">Software Engineer</span>
                                                <br>
                                                <br>
                                                <div class="text-muted fs-nano">
                                                    PRIVATE AND CONFIDENTIAL. This e-mail, its contents and attachments are private and confidential and is
                                                    intended for the recipient only. Any disclosure, copying or unauthorized use of such information is prohibited.
                                                    If you receive this message in error, please notify us immediately and delete the original and any copies and
                                                    attachments.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="msg-03" class="d-flex flex-column border-faded border-top-0 border-end-0 border-start-0 py-3 px-3 px-sm-4 px-lg-0 me-0 me-lg-4 flex-shrink-0">
                                        <div class="d-flex align-items-center flex-row">
                                            <div class="ms-0 me-3 mx-lg-3">
                                                <img src="/public/img/demo/avatars/avatar-c.png" class="profile-image profile-image-md rounded-circle" alt="Melissa Ayre">
                                            </div>
                                            <div class="fw-500 flex-grow-1 flex-shrink-0 d-flex flex-column cursor-pointer" aria-expanded="true" data-bs-toggle="collapse" data-bs-target="#msg-03 > .js-collapse">
                                                <div class="fs-lg"> Melissa Ayre <span class="fs-nano text-muted opacity-75 fw-400 text-truncate width-xs">&lt;melissaa@example.com&gt;</span>
                                                </div>
                                                <div class="fs-nano text-muted opacity-75"> to Me</div>
                                            </div>
                                            <div class="text-muted fs-sm "> 1:00 AM <span class="hidden-mobile">(12 hours ago)</span>
                                            </div>
                                            <div class="collapsed-reveal">
                                                <a href="javascript:void(0);" class="btn btn-icon fs-lg rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-reply"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="js-collapse collapse show">
                                            <div class="ps-lg-3 ms-lg-6 pt-3 pb-4 fs-md"> We've taken customer feedback on board and are pleased to announce that the the industry's most recommended and secure option for Two-Factor Authentication (2FA) is now available to use on our site. So, if you've tried our previous 2FA methods and have not been convinced, why not try our new Time-Based One-Time Password (TOTP)? It's super easy to use, and it works with many third-party 2FA apps you might already have on your phone. We're positive you'll love the new improved experience. </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal : Compose mail-->
                        <div class="modal fade" id="default-example-modal-lg-center" tabindex="-1" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog modal-lg modal-fullscreen-sm-down modal-dialog-centered modal-dialog-scrollable" role="document">
                                <div class="modal-content">
                                    <div class="modal-header bg-danger-500">
                                        <div class="modal-title fw-600">Compose Mail</div>
                                        <button class="btn btn-system ms-auto" type="button" data-bs-dismiss="modal" aria-label="Close">
                                            <svg class="sa-icon sa-icon-light sa-icon-2x">
                                                <use href="/public/icons/sprite.svg#x"></use>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="modal-header border-bottom-0 p-0">
                                        <div class="px-3 w-100 position-relative">
                                            <input id="message-to" type="text" placeholder="Recipients" class="form-control bg-transparent border-top-0 border-start-0 border-end-0 px-0 rounded-0 fs-md mt-2 pe-5" tabindex="2" value="carlie@gmail.com">
                                            <a href="javascript:void(0)" class="position-absolute end-0 top-0 mt-3 me-4" data-bs-toggle="tooltip" data-bs-original-title="Add Cc recipients" data-bs-placement="bottom">Cc</a>
                                            <input id="message-to-cc" type="text" placeholder="Cc" class="form-control bg-transparent border-top-0 border-left-0 border-right-0 px-0 rounded-0 fs-md mt-2 d-none" tabindex="3">
                                            <input type="text" placeholder="Subject" class="form-control bg-transparent fw-bold border-top-0 border-start-0 border-end-0 px-0 rounded-0 fs-md mt-2" tabindex="4" value="Re: New security codes (2)">
                                            <div id="message-attachments" class="d-flex flex-wrap align-items-center gap-2 py-3 position-relative if-empty-display-none">
                                                <div class="alert m-0 p-0 badge bg-primary-50 border-primary ps-2"> security_codes.pdf <button type="button" data-bs-dismiss="alert" class="btn btn-icon btn-xs ms-1 rounded-0 border border-primary border-top-0 border-bottom-0 border-end-0 waves-effect waves-themed">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                                <div class="alert m-0 p-0 badge bg-primary-50 border-primary ps-2"> agreement.pdf <button type="button" data-bs-dismiss="alert" class="btn btn-icon btn-xs ms-1 rounded-0 border border-primary border-top-0 border-bottom-0 border-end-0 waves-effect waves-themed">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                                <a href="#" class="fs-xs text-secondary">show 3 more</a>

                                                <a href="javascript:void(0)" class="position-absolute end-0 top-0 mt-3 me-2">
                                                    <i class="fas fa-paperclip"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-body custom-scrollbar p-0">
                                        <div class="panel-container show rounded-0 flex-1 d-flex flex-column">
                                            <div class="flex-1" style="overflow-y: auto;">
                                                <div id="fake_textarea" class="form-control rounded-0 w-100 h-100 border-0 py-3 height-sm" contenteditable="true" tabindex="5">
                                                    <p>Hi Carlie,</p>

                                                    <p>I'm writing to you about the new security codes. Please find the updated codes attached
                                                        for your reference. Ensure you update your system with these codes by tomorrow to maintain security
                                                        compliance. Let me know if you encounter any issues during the process.</p>

                                                    <p>Best regards,</p>

                                                    <!-- sender info -->
                                                    <div class="d-flex d-column align-items-start mb-3 gap-2">
                                                        <img src="/public/img/demo/avatars/avatar-admin.png" alt="SmartAdmin WebApp" class="mt-1 rounded-circle width-2">
                                                        <div class="border-left pl-3">
                                                            <span class="fw-500 fs-lg d-block l-h-n">Sunny A.</span>
                                                            <span class="fw-400 fs-nano d-block l-h-n mb-1">Software Engineer</span>
                                                        </div>
                                                    </div>
                                                    <!-- footer -->
                                                    <div class="text-muted fs-nano">
                                                        &ZeroWidthSpace;PRIVATE AND CONFIDENTIAL. This e-mail, its contents and attachments are private and confidential and is intended for the recipient only. Any disclosure, copying or unauthorized use of such information is prohibited. If you receive this message in error, please notify us immediately and delete the original and any copies and attachments.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <div class="d-flex align-items-center flex-wrap flex-shrink-0 me-auto gap-2 flex-grow-1">

                                            <button type="button" class="btn btn-icon fs-xl" data-bs-toggle="tooltip" data-bs-original-title="Formatting options" data-bs-placement="top">
                                                <i class="fas fa-font color-fusion-300"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon fs-xl" data-bs-toggle="tooltip" data-bs-original-title="Attach files" data-bs-placement="top">
                                                <i class="fas fa-paperclip color-fusion-300"></i>
                                            </button>
                                            <button type="button" class="btn btn-icon fs-xl hidden-mobile" data-bs-toggle="tooltip" data-bs-original-title="Insert photo" data-bs-placement="top">
                                                <i class="fas fa-camera color-fusion-300"></i>
                                            </button>
                                            <div class="ms-auto">
                                                <button type="button" class="btn btn-icon" data-bs-toggle="tooltip" data-bs-original-title="Disregard draft" data-placement="top">
                                                    <i class="fas fa-trash color-fusion-300"></i>
                                                </button>
                                                <button type="button" class="btn btn-icon width-1" data-bs-toggle="tooltip" data-bs-original-title="More options" data-bs-placement="top">
                                                    <i class="fas fa-ellipsis-v-alt color-fusion-300"></i>
                                                </button>
                                            </div>
                                            <button type="button" class="btn btn-secondary btn-sm">Save Draft</button>
                                            <button type="button" class="btn btn-primary btn-sm">Send</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>

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

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

</body>

</html>