{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}

<!-- Sub Navigation Start  ---> 
<nav class="np-sub-navigation">
	<div class="np-sub-navigation-content">
		<div class="np-sub-navigation-content-item np-sub-navigation-content-item-active">
			<a class="np-sub-navigation-content-item-link" href="/app">
			<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i>
			Home
			</a>
			<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
		</div>
		<div class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
			<a class="np-sub-navigation-content-item-link" href="/app/dashboard">
			<i class="far fa-user-circle np-button-color np-sub-navigation-content-item-icon"></i>
			Dashboard
			</a>
			<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
		</div>
		<div class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
			<a class="np-sub-navigation-content-item-link" href="/app/catalog">
			<i class="far fa-graduation-cap np-button-color np-sub-navigation-content-item-icon"></i>
			Catalog
			</a>
			<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
		</div>
		<div class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
			<a class="np-sub-navigation-content-item-link" href="/app/learning_paths">
			<i class="far fa-road np-button-color np-sub-navigation-content-item-icon"></i>
			Learning Paths
			</a>
			<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
		</div>
		<div class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
			<a class="np-sub-navigation-content-item-link" href="/app/training_events">
			<i class="far fa-calendar-star np-button-color np-sub-navigation-content-item-icon"></i>
			Events
			</a>
			<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
		</div>
	</div>
</nav>
<!-- Sub Navigation Start  ---> 


<!-- Main Navigation Start  ---> 
<main class="np-main np-dashboard np-subpage-container-dashboard np-max-width">

<!-- Introduction Header Start  ---> 
	<div class="header-container">
		<div class="header-left-side">
			<div class="reboot-heading">
				Welcome {{current_person.first_name}},
			</div>
			<div class="reboot-sub-heading">
				Question? Search in courses for solutions and answers
			</div>
		</div>
	</div>
<!-- Introduction Header End  ---> 

<!-- Search Field Start  ---> 
	<form action="/app/search/594b8e2b-6bc5-4b23-8342-359d256ae994" method="get" data-test="desktop-search">
		<input class="reboot-input" aria-label="Search" class="np-header-search-input np-header-font-background-color" type="text" name="q" placeholder="Search ">
		<i class="np-header-search-icon far fa-search"></i>
	</form>
<!-- Search Field End  ---> 

<!-- Heading Start  ---> 
	<div class="header-container">
		<div class="header-left-side">
			<div class="reboot-heading">
				Quick Access Guides 
			</div>
			<div class="reboot-sub-heading">
				Tap on a button below to open the resource. 
			</div>
		</div>
	</div>
<!-- Heading End  ---> 


<!--Buttons Start  ---> 
	<div class="row" style="margin-top:10px">
		<div class="np-stretch-content">
			<div class="np-button reboot-button"> 
				<a class="display: block;" href="/app/learning_paths/bcc9d2dd-1af6-4e4c-b178-cbbd03fa57c4">
				<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i><br> 
				View
				</a>
			</div>
		</div>
		<div class="np-stretch-content">
			<div class="np-button reboot-button"> 
				<a class="display: block;" href="/app/learning_paths/bcc9d2dd-1af6-4e4c-b178-cbbd03fa57c4">
				<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i><br> 
				View
				</a>
			</div>
		</div>
		<div class="np-stretch-content">
			<div class="np-button reboot-button"> 
				<a class="display: block;" href="/app/learning_paths/bcc9d2dd-1af6-4e4c-b178-cbbd03fa57c4">
				<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i><br> 
				View
				</a>
			</div>
		</div>
		<div class="np-stretch-content">
			<div class="np-button reboot-button"> 
				<a class="display: block;" href="/app/learning_paths/bcc9d2dd-1af6-4e4c-b178-cbbd03fa57c4">
				<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i><br> 
				View
				</a>
			</div>
		</div>
		<div class="np-stretch-content">
			<div class="np-button reboot-button"> 
				<a class="display: block;" href="/app/learning_paths/bcc9d2dd-1af6-4e4c-b178-cbbd03fa57c4">
				<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i><br> 
				View
				</a>
			</div>
		</div>
		<div class="np-stretch-content">
			<div class="np-button reboot-button"> 
				<a class="display: block;" href="/app/learning_paths/bcc9d2dd-1af6-4e4c-b178-cbbd03fa57c4">
				<i class="far fa-home-lg-alt np-button-color np-sub-navigation-content-item-icon"></i><br> 
				View
				</a>
			</div>
		</div>
	</div>
  <br> 
<!--Buttons End  ---> 

	

<!-- Heading Start  --->  
	<div class="header-container">
		<div class="header-left-side">
			<div class="reboot-heading">
				Video Walkthroughs
			</div>
			<div class="reboot-sub-heading">
				Watch videos that will walk you through your workflow
			</div>
		</div>
	</div>
  <br> 
<!-- Heading Start  --->

<!-- Training Sessions Start --->
	<div class="row">
		<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
			<div class="card-carousel-container">
				<iframe style="border-radius: 5px 5px 0 0" width="100%" height="200" src="https://www.youtube.com/embed/5hoWKJw5F3o?si=mWxEU6pcKRWD4YN3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
				<div class="np-card-content np-card-content-vertical np-card-padding">
					<h3 class="np-card-content-title">
						Swift Certified - Skin and Wound
					</h3>
					<div class="np-card-content-subtitle">
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- Training Sessions End --->


	<br> 

  <!-- Heading Start --->
  <br> 
	<div class="header-container">
		<div class="header-left-side">
			<div class="reboot-heading">
        Live Training
			</div>
			<div class="reboot-sub-heading">
				Looking for live training with a Swift professional? Join a session here!
			</div>
		</div>
	</div>

	<br> 
    <!-- Heading End --->

      <!-- ILT selecting Start --->
  <div class="row">
    <div class="col-xs-12 col-sm-2">
    </div>
  </div>
  {% include "training_events_index" %}
  <br> 

        <!-- ILT selecting End--->



  <!-- Heading Start --->
	<div class="header-container">
		<div class="header-left-side">
			<div class="reboot-heading">
				Courses for Your Organization
			</div>
			<div class="reboot-sub-heading">
				Complete these courses on your computer for an optimal experience. 
			</div>
		</div>
	</div>
  <br> 

  <!-- Heading End --->


    <!--Course Cards Start --->
	<div class="col-xs-6 col-md-4 col-lg-3 np-stretch-content">
		<div >
			<div class="card-carousel-container">
				<div class="np-card-ribbon">
					Certification
				</div>
				<img class="np-card-image" alt="Swift Certified - Skin and Wound" src="https://cdn.filestackcontent.com/security=policy:eyJleHBpcnkiOjQ4NDQyNjg0NTAsImNhbGwiOlsicmVhZCIsImNvbnZlcnQiLCJzdG9yZSIsInBpY2siLCJyZW1vdmUiXX0=,signature:95cb60bbded1027083d0b31b199cbd1e4316d88a00a55c71fd20ca09860a3355/auto_image/compress/60pUKoKSWy1V50b3IQbA">
				<div class="np-card-content np-card-content-vertical np-card-padding">
					<h3 class="np-card-content-title">
						Swift Certified - Skin and Wound
					</h3>
					<div class="np-card-content-subtitle">
					</div>
					<div class="np-card-content-footer">
						<div class="np-card-content-progress np-button-color" style="display: none;">
							Not started
						</div>
						<a class="np-button np-button-wide" href="/app/courses/f6d97a14-a990-4435-a3d9-939d044c19a8">
						View
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

      <!--Course Cards End--->


</main>
{% include "footer" %}
<script>
	let featuredCards = document.querySelectorAll('.np-homepage-featured-courses .card-carousel');
	featuredCards.forEach((card) => {
	  card
	    .classList
	    .remove('col-sm-6')
	    card
	    .classList
	    .remove('col-md-4');
	})
</script>