@extends ('web.layouts-v2.master')

@section ('title')
@lang('messages.submenu_asim_quickstart') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.desc_asim_quickstart')">
@endsection

@section ('seoNotation')
@include('web.partials.seo-notation')
{!! $jsonLdSchema !!}
@endsection

@section ('content')

<!-- Breadcrumbs -->
<section class="g-bg-gray-light-v5 g-pt-110 g-pb-0 g-pb-20--lg breadcrumbs">
    <div class="container">
        <div class="d-sm-flex">
            <div class="align-self-center">
                <h1 class="g-font-weight-700 g-font-size-35 g-font-size-50--md g-line-height-0_8 text-left g-letter-spacing-2">
                    @lang('messages.brandname_asim_quickstart_css')
                </h1>
                <p class="g-font-weight-600 text-uppercase g-font-size-20--md g-line-height-0_4 g-letter-spacing-1">@lang('messages.label_asim')
                </p>
                 {{-- 
                    <img class="img-fluid w-100 g-py-10" style="max-height: 110px;" src="{{ asset('../resources/assets/img/inline/quickstart-artboard-wide-logo.jpg') }}" alt="@lang('messages.title') @lang('messages.menu_course_asim') @lang('messages.menu_quickstart')">
                 --}}
            </div>

            <div class="align-self-center ml-auto">
                <ol class="breadcrumb g-color-gray-light-v2">
                    {{-- <li class="breadcrumb-item g-color-main">@lang('messages.menu_active_shooter')</li> --}}
                    <li class="breadcrumb-item g-color-main"><a class="g-color-primary--hover" href="{{ URL::route('course-catalog') }}">@lang('messages.menu_courses')</a></li>
                    <li class="breadcrumb-item g-color-primary active">@lang('messages.submenu_asim_quickstart')</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<!-- End Breadcrumbs -->

<!--=== Content Part ===-->
<section class="container g-pt-20 g-pt-30--lg">
    <div class="row justify-content-between g-mb-10">
        <div class="col-lg-9 g-mb-30--lg">
            <div class="mb-2 text-left">
                <h2 class="h3 g-font-weight-600 g-font-size-20 g-font-size-30--md mb-3 g-color-black"> 
                    The <span class="g-color-darkred">1-hour</span> starting point for <span class="g-color-darkred">every responder</span> to active shooter events. 
                </h2>
            </div>

            <!-- 1 Column Body -->
            {{-- <img class="img-fluid w-100 g-py-10" src="{{ asset('../resources/assets/img/inline/quickstart-artboard-wide-logo.jpg') }}" alt="@lang('messages.title') @lang('messages.menu_course_asim') @lang('messages.menu_quickstart')"> --}}
            <!-- End 1 Column Body -->

            <!-- 1 Column Body -->
            <div class="d-flex justify-content-between g-mt-10">
                <div class="text-justify">
                    <p>
                        When an active shooter strikes, confusion and uncertainty cost lives. 
                        <!-- Because each agency trains differently, it’s hard to work together when every second counts. -->
                        <span class="g-font-weight-600"><span class="g-color-primary">ASIM</span> QuickStart&trade;</span> is a <span class="g-font-weight-700">FREE</span> online course providing <span class="g-font-weight-600 g-color-black">responders with the
                        <span class="g-color-primary">experience</span> and <span class="g-color-primary">confidence</span> to execute their task</span>
                        during an Active Shooter Event, no matter their rank or assignment.
                    </p>
                </div>
            </div>
            <!-- End 1 Column Body -->



<div id="accordion-07" class="u-accordion " role="tablist" aria-multiselectable="true">

  <!-- Card -->
  <div class="card rounded-0 g-brd-around g-brd-gray-light-v4">
    <div id="accordion-07-heading-02" class="u-accordion__header g-pa-0" role="tab">
      <h5 class="mb-0 text-uppercase g-font-size-default g-font-weight-700 g-pa-20a mb-0">
        <a class="collapsed d-flex g-text-underline--none--hover" href="#accordion-07-body-02" data-toggle="collapse" data-parent="#accordion-07" aria-expanded="false" aria-controls="accordion-07-body-02">
          <span class="u-accordion__control-icon g-brd-right g-brd-gray-light-v4 text-center g-pa-20">
            <i class="fa fa-plus"></i>
            <i class="fa fa-minus"></i>
          </span>
          <span class="g-pa-20">
            How to Take This Course and Get a Certificate
          </span>
        </a>
      </h5>
    </div>
    <div id="accordion-07-body-02" class="collapse" role="tabpanel" aria-labelledby="accordion-07-heading-02" data-parent="#accordion-07">
      <div class="u-accordion__body  g-px-50 g-py-5">
          
            <!-- Icon Blocks -->
            <div class="row g-py-40">
              <div class="col-lg-4 g-mb-60">
                <!-- Icon Blocks -->
                <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-px-30 g-pb-20">
                  <span class="u-icon-v3 g-color-white g-bg-primary g-pull-50x-up rounded-circle">
                    <i class="g-font-weight-600" style="font-style: normal;">1</i> 
                  </span>
                  <h3 class="h5 g-color-black g-mb-10">Register & Start</h3>
                  <p class="g-color-gray-dark-v4 g-mb-20">Create an account and take the Pre-Test.</p>
                  <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="https://www.c3pathways.com/mcadi/modules/register?c=awa123">Register</a>
                </div>
                <!-- End Icon Blocks -->
              </div>
            
              <div class="col-lg-4 g-mb-60">
                <!-- Icon Blocks -->
                <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-px-30 g-pb-20">
                  <span class="u-icon-v3 g-color-white g-bg-green g-pull-50x-up rounded-circle">
                    <i class="g-font-weight-600" style="font-style: normal;">2</i>
                  </span>
                  <h3 class="h5 g-color-black g-mb-10">Learn</h3>
                  <p class="g-color-gray-dark-v4 g-mb-20">Each module has a video and a Post-Test. Complete them in any order.</p>
                  <!-- <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#!">Read More</a> -->
                </div>
                <!-- End Icon Blocks -->
              </div>
            
              <div class="col-lg-4 g-mb-60">
                <!-- Icon Blocks -->
                <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-px-30 g-pb-20">
                  <span class="u-icon-v3 g-color-white g-bg-darkred g-pull-50x-up rounded-circle">
                    <i class="g-font-weight-600" style="font-style: normal;">3</i>
                  </span>
                  <h3 class="h5 g-color-black g-mb-10">Get Certificate</h3>
                  <p class="g-color-gray-dark-v4 g-mb-20">After passing all Post-Tests, you will receive a Certificate via email.</p>
                  <!-- <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#!">Read More</a> -->
                </div>
                <!-- End Icon Blocks -->
              </div>
            </div>
            <!-- End Icon Blocks -->

      </div>
    </div>
  </div>
  <!-- End Card -->
</div>


            
            
            <!-- 1 Column Body -->
            @include ('web.partials-ncier.asim-quickstart-modules')
            <!-- End 1 Column Body -->

            <hr class="g-my-10">
            <!-- 1 Column Body -->
            {{-- <div class="d-flex justify-content-between">
                <span class="g-valign-top g-font-size-12">&reg; Stop the Killing, Stop the Dying is a registered trademark of Texas State University and is used with permission.</span> 
            </div> --}}
            <!-- End 1 Column Body -->
        </div>

        <div class="col-lg-3 g-mt-10 g-mb-30--md">
            {{-- @include ('web.partials-ncier.aside-course-breakdown-details') --}}
            @include ('web.partials-ncier.aside-links-asim')
        </div>
    </div>
</section>

<!--=== End Content Part ===-->
@endsection

@section ('javascript')
<!-- Raiting -->
<script  src="{{ asset('../resources/assets/js/components/hs.rating.js') }}"></script>

<script>
    $(document).on('ready', function () {
        // initialization of rating
        $.HSCore.components.HSRating.init($('.js-rating'), {
            spacing: 2
        });
            
        // initialization of popups
        $.HSCore.components.HSPopup.init('.js-fancybox');
    });
</script>
@endsection