{{#> 
	layouts/main 
	title="Inbox Read" 
	pagename="page_inbox_read" 
	heading="inbox" 
	category_1="Page Views"
	preemptiveclass="nav-function-minify layout-composed"
}}
{{#*inline "head-block"}}
<link rel="stylesheet" media="screen, print" href="css/fa-solid.css">
<link rel="stylesheet" media="screen, print" href="css/fa-brands.css">
{{/inline}}
{{#*inline "content-block"}}

<div class="d-flex flex-grow-1 p-0">

	<!-- left slider -->
	{{> include/pages/inbox/_menu}}
	<!-- end left slider -->

	<!-- inbox container -->
	<div class="d-flex flex-column flex-grow-1 bg-white">
		<!-- inbox header -->
		<div class="flex-grow-0">
			<!-- inbox button shortcut -->
			<div class="d-flex flex-wrap align-items-center pl-2 pr-3 py-2 px-sm-4 pr-lg-5 pl-lg-0 border-faded border-top-0 border-left-0 border-right-0">
				<div class="flex-1 d-flex align-items-center">
					<a href="page_inbox_general.html" class="btn btn-icon rounded-circle mr-2 mr-lg-3">
					<i class="fas fa-arrow-left fs-lg"></i>
					</a>
					<a href="javascript:void(0);" class="btn btn-icon rounded-circle mr-1">
					<i class="fas fa-redo fs-md"></i>
					</a>
					<a href="page_inbox_general.html" class="btn btn-icon rounded-circle mr-1">
					<i class="fas fa-exclamation-circle fs-md"></i>
					</a>
					<a href="page_inbox_general.html" id="js-delete-selected" class="btn btn-icon rounded-circle mr-1">
					<i class="fas fa-trash fs-md"></i>
					</a>
				</div>
				<div class="text-muted mr-1 mr-lg-3 ml-auto">
					<span class="hidden-lg-down"> 1 - 50 of 135 </span>
					<div class="btn-group hidden-lg-up" role="group">
						<button type="button" class="btn btn-default">Reply</button>
						<div class="btn-group" role="group">
							<button id="dropdown-reply" type="button" class="btn btn-default dropdown-toggle px-2 js-waves-off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
							<div class="dropdown-menu p-0" aria-labelledby="dropdown-reply">
								<a class="dropdown-item" href="#">Reply to all</a>
								<a class="dropdown-item" href="#">Forward</a>
								<div class="dropdown-divider m-0"></div>
								<a class="dropdown-item" href="#">
								Move to...</a>
							</div>
						</div>
					</div>
				</div>
				<div class="d-flex flex-wrap hidden-lg-down">
					<button class="btn btn-icon rounded-circle"><i class="{{iconPrefix}} fa-chevron-left fs-md"></i></button>
					<button class="btn btn-icon rounded-circle"><i class="{{iconPrefix}} fa-chevron-right fs-md"></i></button>
				</div>
			</div>
			<!-- end inbox button shortcut -->
		</div>
		<!-- end inbox header -->
		<!-- inbox message -->
		<div class="flex-wrap align-items-center flex-grow-1 position-relative bg-white">
			<div class=" position-absolute pos-top pos-bottom w-100 custom-scroll">
				<div class="d-flex h-100 flex-column">

					<!-- inbox title -->
					<div class="d-flex align-items-center pl-2 pr-3 py-3 pl-sm-3 pr-sm-4 py-sm-4 px-lg-5 py-lg-3 flex-shrink-0">
						<!-- button for mobile -->
						<a href="javascript:void(0);" class="pl-3 pr-3 py-2 d-flex d-lg-none align-items-center justify-content-center mr-2 btn" data-action="toggle" data-class="slide-on-mobile-left-show" data-target="#js-inbox-menu">
							<i class="{{iconPrefix}} fa-ellipsis-v h1 mb-0 "></i>
						</a>
						<!-- end button for mobile -->
						<h1 class="subheader-title mb-0 ml-2 ml-lg-5">
							Re: New security codes
						</h1>
						<span class="badge badge-primary ml-2 hidden-sm-down">INBOX</span>

						<div class="d-flex position-relative ml-auto">
							<a href="#" title="starred" class="btn btn-icon ml-1 fs-lg">
								<i class="fas fa-star color-warning-500"></i>
							</a>
							<a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg" data-toggle="collapse" data-target=".js-collapse">
								<i class="fas fa-arrows-v"></i>
							</a>
							<a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg hidden-lg-down">
								<i class="fas fa-print"></i>
							</a>
						</div>
					</div>
					<!-- end inbox title -->

					<!-- message -->
					<div id="msg-01" class="d-flex flex-column border-faded border-top-0 border-left-0 border-right-0 py-3 px-3 px-sm-4 px-lg-0 mr-0 mr-lg-5 flex-shrink-0">

						<div class="d-flex align-items-center flex-row">
							<div class="ml-0 mr-3 mx-lg-3">
								<img src="img/demo/avatars/avatar-c.png" class="profile-image profile-image-md rounded-circle" alt="Melissa Ayre">
							</div>
							<div class="fw-500 flex-1 d-flex flex-column cursor-pointer" data-toggle="collapse" data-target="#msg-01 > .js-collapse">
								<div class="fs-lg">
									Melissa Ayre
									<span class="fs-nano fw-400 ml-2">notifications@github.com</span>
								</div>
								<div class="fs-nano">
									to {{email}}
								</div>
							</div>
							
							<div class="color-fusion-200 fs-sm">
								1:00 AM <span class="hidden-sm-down">(12 hours ago)</span>
							</div>
							<div class="collapsed-reveal"> 
								<a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg rounded-circle">
									<i class="{{iconPrefix}} fa-reply"></i>
								</a>
							</div>
						</div>

						<div class="collapse js-collapse">
							<div class="pl-lg-5 ml-lg-5 pt-3 pb-4">
								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>
					<!-- end message -->

					<!-- message me-->
					<div id="msg-02" class="d-flex flex-column border-faded border-top-0 border-left-0 border-right-0 py-3 px-3 px-sm-4 px-lg-0 mr-0 mr-lg-5 flex-shrink-0">

						<div class="d-flex align-items-center flex-row">
							<div class="ml-0 mr-3 mx-lg-3">
								<img src="img/demo/avatars/{{avatar}}" class="profile-image profile-image-md rounded-circle" alt="Dr. Codex Lantern">
							</div>
							<div class="fw-500 flex-1 d-flex flex-column cursor-pointer" data-toggle="collapse" data-target="#msg-02 > .js-collapse">
								<div class="fs-lg">
									{{user}}
									<span class="fs-nano fw-400 ml-2">me</span>
								</div>
								<div class="fs-nano">
									to melissa.ayre@gotbootstrap.com
								</div>
							</div>
							<div class="color-fusion-200 fs-sm">
								7:00 AM <span class="hidden-sm-down">(6 hours ago)</span>
							</div>
							<div class="collapsed-reveal"> 
								<a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg rounded-circle">
									<i class="{{iconPrefix}} fa-reply"></i>
								</a>
							</div>
						</div>

						<div class="collapse js-collapse">
							<div class="pl-lg-5 ml-lg-5 pt-3 pb-4">
								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>

								{{> include/pages/inbox/_signature}}

							</div>
						</div>

					</div>
					<!-- end message me-->

					<!-- message -->
					<div id="msg-03" class="d-flex flex-column border-faded border-top-0 border-left-0 border-right-0 py-3 px-3 px-sm-4 px-lg-0 mr-0 mr-lg-5 flex-shrink-0">

						<div class="d-flex align-items-center flex-row">
							<div class="ml-0 mr-3 mx-lg-3 width-2">
								<img src="img/demo/avatars/avatar-c.png" class="profile-image profile-image-md rounded-circle" alt="Melissa Ayre">
							</div>
							<div class="fw-500 flex-1 d-flex flex-column cursor-pointer" data-toggle="collapse" data-target="#msg-03 > .js-collapse">
								<div class="fs-lg">
									Melissa Ayre
									<span class="fs-nano fw-400 ml-2">notifications@github.com</span>
								</div>
								<div class="fs-nano">
									to {{email}}
								</div>
							</div>
							<div class="color-fusion-200 fs-sm">
								6:00 AM <span class="hidden-sm-down">(5 hours ago)</span>
							</div>
							<div class="collapsed-reveal"> 
								<a href="javascript:void(0);" class="btn btn-icon ml-1 fs-lg rounded-circle">
									<i class="{{iconPrefix}} fa-reply"></i>
								</a>
							</div>
						</div>

						<div id="js-msg-1" class="js-collapse">
							<div class="pl-lg-5 ml-lg-5 pt-3 pb-4 ">
								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>	
					<!-- end message -->

				</div>
			</div>
		</div>
		<!-- end inbox message -->
	</div>
	<!-- end inbox container -->

	<!-- compose message -->
	{{> include/pages/inbox/_compose}}
	<!-- end compose message -->

</div>

{{/inline}}
{{#*inline "scripts-block"}}
<script type="text/javascript">

	// push settings with "false" save to local
	initApp.pushSettings("nav-function-minify layout-composed", false);


</script>
{{/inline}}
{{/layouts/main}}