<!-- BEGIN Offcanvas -->
<div class="offcanvas offcanvas-end" id="offcanvas-todo">
	<div class="offcanvas-header">
		<h3 class="offcanvas-title">May 14, 2020</h3>
		<button class="btn btn-label-danger btn-icon" data-bs-dismiss="offcanvas">
			<i class="fa fa-times"></i>
		</button>
	</div>
	<div class="offcanvas-body" data-simplebar data-simplebar-direction="{{ direction }}">

		<!-- BEGIN Portlet -->
		<div class="portlet">
			<div class="portlet-header portlet-header-bordered">
				<div class="portlet-icon">
					<i class="fa fa-tasks"></i>
				</div>
				<h3 class="portlet-title">Upcoming events</h3>
			</div>
			<div class="portlet-body">

				<!-- BEGIN Timeline -->
				<div class="timeline rich-list-bordered">
					<div class="timeline-item">
						<div class="timeline-pin">
							<i class="marker marker-circle text-primary"></i>
						</div>
						<div class="timeline-content">

							<!-- BEGIN Rich List -->
							<div class="rich-list-item">
								<div class="rich-list-content">
									<h5 class="rich-list-title">12:00</h5>
									<p class="rich-list-paragraph">Donec laoreet fringilla justo a pellentesque</p>
								</div>
							</div>
							<!-- END Rich List -->

						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-pin">
							<i class="marker marker-circle text-success"></i>
						</div>
						<div class="timeline-content">

							<!-- BEGIN Rich List -->
							<div class="rich-list-item">
								<div class="rich-list-content">
									<h5 class="rich-list-title">13:20</h5>
									<p class="rich-list-paragraph">Nunc quis massa nec enim</p>
								</div>
							</div>
							<!-- END Rich List -->

						</div>
					</div>
					<div class="timeline-item">
						<div class="timeline-pin">
							<i class="marker marker-circle text-danger"></i>
						</div>
						<div class="timeline-content">

							<!-- BEGIN Rich List -->
							<div class="rich-list-item">
								<div class="rich-list-content">
									<h5 class="rich-list-title">14:00</h5>
									<p class="rich-list-paragraph">Praesent sit amet</p>
								</div>
							</div>
							<!-- END Rich List -->

						</div>
					</div>
				</div>
				<!-- END Timeline -->

			</div>
		</div>
		<!-- END Portlet -->

		<!-- BEGIN Portlet -->
		<div class="portlet">
			<div class="portlet-header portlet-header-bordered">
				<div class="portlet-icon">
					<i class="fa fa-users"></i>
				</div>
				<h3 class="portlet-title">Contacts</h3>
				<div class="portlet-addon">
					<button class="btn btn-label-primary btn-icon">
						<i class="fa fa-plus"></i>
					</button>
				</div>
			</div>
			<div class="portlet-body p-0">

				<!-- BEGIN Rich List -->
				<div class="rich-list rich-list-flush rich-list-action">
					<a href="#" class="rich-list-item">
						<div class="rich-list-prepend">

							<!-- BEGIN Avatar -->
							<div class="avatar avatar-circle">
								<div class="avatar-addon avatar-addon-top">
									<div class="avatar-icon avatar-icon-info">
										<i class="fa fa-thumbtack"></i>
									</div>
								</div>
								<div class="avatar-display">
									<img src="{{ 'assets/images/avatar/blank.webp' | url }}" alt="Avatar image">
								</div>
								<div class="avatar-addon avatar-addon-bottom">
									<i class="marker marker-dot text-secondary"></i>
								</div>
							</div>
							<!-- END Avatar -->

						</div>
						<div class="rich-list-content">
							<h4 class="rich-list-title">Charlie Stone</h4>
							<span class="rich-list-subtitle">Art Director</span>
						</div>
						<div class="rich-list-append flex-column align-items-end">
							<span class="text-muted text-nowrap">1 min</span>
							<span class="badge badge-success rounded-pill">1</span>
						</div>
					</a>
					<a href="#" class="rich-list-item">
						<div class="rich-list-prepend">

							<!-- BEGIN Avatar -->
							<div class="avatar avatar-circle">
								<div class="avatar-display">
									<img src="{{ 'assets/images/avatar/blank.webp' | url }}" alt="Avatar image">
								</div>
								<div class="avatar-addon avatar-addon-bottom">
									<i class="marker marker-dot text-success"></i>
								</div>
							</div>
							<!-- END Avatar -->

						</div>
						<div class="rich-list-content">
							<h4 class="rich-list-title">Freddie Stevens</h4>
							<span class="rich-list-subtitle">Journalist</span>
						</div>
						<div class="rich-list-append flex-column align-items-end">
							<span class="text-muted text-nowrap">2 hour</span>
							<span class="badge badge-success rounded-pill">12</span>
						</div>
					</a>
					<a href="#" class="rich-list-item">
						<div class="rich-list-prepend">

							<!-- BEGIN Avatar -->
							<div class="avatar avatar-circle">
								<div class="avatar-display">
									<img src="{{ 'assets/images/avatar/blank.webp' | url }}" alt="Avatar image">
								</div>
								<div class="avatar-addon avatar-addon-bottom">
									<i class="marker marker-dot text-success"></i>
								</div>
							</div>
							<!-- END Avatar -->

						</div>
						<div class="rich-list-content">
							<h4 class="rich-list-title">Tyler Clark</h4>
							<span class="rich-list-subtitle">Programmer</span>
						</div>
						<div class="rich-list-append flex-column align-items-end">
							<span class="text-muted text-nowrap">5 hour</span>
						</div>
					</a>
					<a href="#" class="rich-list-item">
						<div class="rich-list-prepend">

							<!-- BEGIN Avatar -->
							<div class="avatar avatar-circle">
								<div class="avatar-addon avatar-addon-top">
									<div class="avatar-icon avatar-icon-success">
										<i class="fa fa-check"></i>
									</div>
								</div>
								<div class="avatar-display">
									<img src="{{ 'assets/images/avatar/blank.webp' | url }}" alt="Avatar image">
								</div>
								<div class="avatar-addon avatar-addon-bottom">
									<i class="marker marker-dot text-secondary"></i>
								</div>
							</div>
							<!-- END Avatar -->

						</div>
						<div class="rich-list-content">
							<h4 class="rich-list-title">Darcy Harrison</h4>
							<span class="rich-list-subtitle">Internet Marketer</span>
						</div>
						<div class="rich-list-append flex-column align-items-end">
							<span class="text-muted text-nowrap">1 day</span>
							<span class="badge badge-success rounded-pill">2</span>
						</div>
					</a>
					<a href="#" class="rich-list-item">
						<div class="rich-list-prepend">

							<!-- BEGIN Avatar -->
							<div class="avatar avatar-circle">
								<div class="avatar-display">
									<img src="{{ 'assets/images/avatar/blank.webp' | url }}" alt="Avatar image">
								</div>
								<div class="avatar-addon avatar-addon-bottom">
									<i class="marker marker-dot text-success"></i>
								</div>
							</div>
							<!-- END Avatar -->

						</div>
						<div class="rich-list-content">
							<h4 class="rich-list-title">Victor Payne</h4>
							<span class="rich-list-subtitle">Accountant</span>
						</div>
						<div class="rich-list-append flex-column align-items-end">
							<span class="text-muted text-nowrap">1 day</span>
							<span class="badge badge-success rounded-pill">5</span>
						</div>
					</a>
					<a href="#" class="rich-list-item">
						<div class="rich-list-prepend">

							<!-- BEGIN Avatar -->
							<div class="avatar avatar-circle">
								<div class="avatar-display">
									<img src="{{ 'assets/images/avatar/blank.webp' | url }}" alt="Avatar image">
								</div>
								<div class="avatar-addon avatar-addon-bottom">
									<i class="marker marker-dot text-secondary"></i>
								</div>
							</div>
							<!-- END Avatar -->

						</div>
						<div class="rich-list-content">
							<h4 class="rich-list-title">Alberta Harris</h4>
							<span class="rich-list-subtitle">UI Designer</span>
						</div>
						<div class="rich-list-append flex-column align-items-end">
							<span class="text-muted text-nowrap">2 day</span>
							<span class="badge badge-success rounded-pill">4</span>
						</div>
					</a>
				</div>
				<!-- END Rich List -->

			</div>
		</div>
		<!-- END Portlet -->

	</div>
</div>
<!-- END Offcanvas -->
