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

<!-- Sub Navigation Start  ---> 
<nav class="np-sub-navigation" style="margin-bottom: 0px;">
	<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/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 End  ---> 


<!-- Main Navigation Start  ---> 
<main>
<div class="np-homepage-hero" style="background-color: #F3F3F6; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #6E9FD7, #F3F3F6); display: flex;">
<img
class="np-homepage-hero-image col-4"
style="align-content: right;"
src="{{ homepage.artwork_url }}"
alt="{{ homepage.headline }}" />
<div class="np-homepage-hero-content">
<div class="np-homepage-headline np-header-font-color col-xs-9 col-md-8 col-lg-6 np-stretch-content">
{{ homepage.headline }}
</div>
<div class="np-homepage-subheadline np-header-font-color col-xs-9 col-md-8 col-lg-6 np-stretch-content">
{{ homepage.subheadline }}
</div>
<div class="row">
<a class="np-homepage-hero-cta np-button col-xs-6 col-md-4 col-lg-3 np-stretch-content ml-1" href="{% route dashboard %}">
  My Course Dashboard
</a>
</div>
</div>
</div>

<div class="np-max-width" style="text-align:center; background-color:#ffffff; padding: 30px"> 
  <div class="np-homepage-headline np-header-font-color  np-stretch-content" >
    Using the older version of Swift?
  </div>
  <div class="np-homepage-subheadline np-header-font-color np-stretch-content">
      Explore some of the courses showing how to use the older version of Swift. 
  </div>
  <a class="np-homepage-hero-cta np-button  np-stretch-content ml-1" href="{% route dashboard %}" >
  Previous Content
</a>


</div>

<div class="np-main np-dashboard np-subpage-container-dashboard np-max-width"> 
<!--Buttons Start  ---> 

<div class="np-homepage-headline np-header-font-color  np-stretch-content" >
  Most Used Resources 
  </div>
<div class="np-homepage-subheadline np-header-font-color np-stretch-content" >
      Explore some of the general resources users find useful.
  </div>

<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  ---> 


</div>
<div class="np-max-width" style="text-align:center; background-color:#ffffff; padding: 30px"> 
<!-- Heading Start  --->  

<div class="header-container">
  <div class="">
    <div class="np-homepage-headline ">
      Video Walkthroughs
    </div>
    <div class="np-homepage-subheadline ">
      Watch videos that will walk you through your workflow
    </div>
  </div>
</div>
<br> 
<!-- Heading Start  --->

<!-- YouTube Start  --->  
<div class="row">
  <div class="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>
<!-- YouTube Start  --->  
</div>


  <div class="np-max-width" style="padding:0 0 40px 0">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline m-sub">
        Learn more about the Swift Medical Team
      </div>
    </div>
    <div class="np-homepage-featured-courses row">
      <div class="col-xs-6 col-md-4 col-lg-3 np-stretch-content">
        <img class="np-card-image" src="https://info.swiftmedical.com/hubfs/+%20People%20Photos,%20Headshots/ProfileSandy-1.png">
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 np-stretch-content ">
        <img class="np-card-image" src="https://info.swiftmedical.com/hubfs/+%20People%20Photos,%20Headshots/ProfileKayla-1.png">
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 np-stretch-content">
        <img class="np-card-image" src="https://info.swiftmedical.com/hubfs/+%20People%20Photos,%20Headshots/ProfileAmy-1.png">
      </div>
      <div class="col-xs-6 col-md-4 col-lg-3 np-stretch-content">
        <img class="np-card-image" src="https://info.swiftmedical.com/hubfs/+%20People%20Photos,%20Headshots/ProfileRob-1.png">
      </div>
    </div>


  </div>
</main>
{% include "footer" %}