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

@section ('title')
@lang('messages.menu_course_asim') @lang('messages.submenu_checklist') @lang('messages.label_app_official') @lang('messages.label_app_mobile_app') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.desc_checklist_mobile')">
@endsection

@section ('seoNotation')
@include('web.partials.seo-notation')
@endsection

@section ('content')

<!-- Breadcrumbs -->
<section class="g-bg-gray-light-v5 g-pt-20 g-pt-110--lg 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-30 g-font-size-50--md g-line-height-0_7 text-left g-letter-spacing-3">
                    <span class="g-color-primary text-uppercase">@lang('messages.menu_course_asim')</span>@lang('messages.submenu_checklist')
                </h1>
                <span class="g-font-weight-600 text-uppercase">@lang('messages.label_app_official') @lang('messages.label_app_mobile_app')</span>
            </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('asimChecklist') }}">@lang('messages.submenu_checklist')</a></li>
                    <li class="breadcrumb-item g-color-primary active">@lang('messages.label_app_official') @lang('messages.label_app_mobile_app')</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-center hidden-md-down"> <!-- hidden-xs-down -->
                <h2 class="h3 g-font-weight-600 g-font-size-20 g-font-size-30--md mb-3 g-color-black">@lang('messages.label_asim') <span class="g-color-primary">@lang('messages.label_checklist')</span>.</h2>
            </div>

            <!-- 2 Columns Body -->
            <div class="d-flex flex-sm-row flex-column g-mt-20">
                <div class="text-justify mr-4 hidden-md-down">
                    <img class="img-fluid mx-auto d-block" src="{{ asset('../resources/assets/img/thumbnails/app-logo.png') }}" alt="@lang('messages.title') @lang('messages.menu_active_shooter') @lang('messages.submenu_exercises')">
                </div>
                <div class="w-100 text-justify">
                    <p>
                        <span class="g-color-primary g-font-weight-600"><span class="text-uppercase">@lang('messages.menu_course_asim')</span> @lang('messages.label_checklist')</span> for law enforcement, fire, and EMS. 
                    <p>

                    <h2 class="hidden-lg-up g-font-weight-600 g-color-black g-font-size-25 g-line-height-1_2 mb-2 text-center">@lang('messages.label_app_official') <span class="g-color-primary">@lang('messages.label_app_title')</span> @lang('messages.label_app_mobile_app')</h2>
                    <h6 class="g-font-weight-600">@lang('messages.label_app_download')</h6>

                    <p class="g-mb-10 g-color-gray-dark-v4 g-font-weight-500 g-font-size-14 g-line-height-1_2">
                        <span class="g-valign-top g-font-size-11">*</span>@lang('messages.label_app_copyright') 
                        You must receive <a href="{{ $links['copyright_clearance_link'] }}">WRITTEN PERMISSION</a> from C3 Pathways to use it.
                    </p>

                    <div class="hidden-md-down d-flex justify-content-center mb-3">
                        <div class="p-2">
                            <a href="{{ $links['apple_store_link'] }}" class="btn btn-lg u-btn-outline-black g-brd-2 g-rounded-10 u-btn-white g-color-black g-color-white--hover g-bg-black--hover u-btn-content g-font-weight-600 
                                g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-5">
                                <i class="fa fa-apple pull-left g-font-size-36 g-mr-15"></i>
                                <span class="float-left text-left g-font-size-11 g-pt-3">
                                    @lang('messages.label_download_on_the')
                                    <span class="d-block g-font-size-16 g-font-weight-500 g-letter-spacing-minus-1">@lang('messages.label_apple_store')</span>
                                </span>
                            </a>
                        </div>
                        <div class="p-2">
                            <a href="{{ $links['android_store_link'] }}" class="btn btn-lg u-btn-outline-black g-brd-2 g-rounded-10 u-btn-white g-color-black g-color-white--hover g-bg-black--hover u-btn-content g-font-weight-600 
                                    g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-5">
                                <i class="fa fa-android pull-left g-font-size-36 g-mr-15"></i>
                                <span class="float-left text-left g-font-size-11 g-pt-3">
                                    @lang('messages.label_get_it_on')
                                    <span class="d-block g-font-size-16 g-font-weight-500 g-letter-spacing-minus-1">@lang('messages.label_android_play')</span>
                                </span>
                            </a>
                        </div>
                    </div>

                    <div class="hidden-lg-up d-flex justify-content-center mb-3"> <!-- Mobile version -->
                        <div class="row g-my-5 g-mt-20 text-center">
                            <div class="col-sm-12">
                                <a href="{{ $links['apple_store_link'] }}" class="btn btn-lg u-btn-outline-black g-brd-2 g-rounded-10 u-btn-white g-color-black g-color-white--hover g-bg-black--hover u-btn-content g-font-weight-600 
                                        g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-5">
                                    <i class="fa fa-apple pull-left g-font-size-36 g-mr-15"></i>
                                    <span class="float-left text-left g-font-size-11 g-pt-3">
                                        @lang('messages.label_download_on_the')
                                        <span class="d-block g-font-size-16 g-font-weight-500 g-letter-spacing-minus-1">@lang('messages.label_apple_store')</span>
                                    </span>
                                </a>
                                <a href="{{ $links['android_store_link'] }}" class="btn btn-lg u-btn-outline-black g-brd-2 g-rounded-10 u-btn-white g-color-black g-color-white--hover g-bg-black--hover u-btn-content g-font-weight-600 
                                        g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-5">
                                    <i class="fa fa-android pull-left g-font-size-36 g-mr-15"></i>
                                    <span class="float-left text-left g-font-size-11 g-pt-3">
                                        @lang('messages.label_get_it_on')
                                        <span class="d-block g-font-size-16 g-font-weight-500 g-letter-spacing-minus-1">@lang('messages.label_android_play')</span>
                                    </span>
                                </a>
                            </div>
                        </div>
        
                    </div>
                    
                </div>
            </div>
            <!-- End 2 Columns Body -->

            <section id="app-screenshots" class="g-pt-20 g-pt-30--lg"> <!--  hidden-print -->
                <div class="container">
                    <!-- Heading -->
                    <div class="row justify-content-center text-center g-mb-10">
                        <div class="col-lg-9">
                            <h3 class="h4 g-font-weight-600 g-color-black">App Screenshots</h3>
                        </div>
                    </div>
                    <!-- End Heading -->

                    <div id="carouselPics" class="js-carousel g-pb-10" data-infinite="true" data-autoplay="true" data-speed="7000" data-lazy-load="progressive"
                         data-slides-show="3" data-pagi-classes="u-carousel-indicators-v31 g-absolute-centered--x g-bottom-0 text-center"> 

                        @for ($i = 1; $i <= 5; $i++) 
                        <div class="js-slide g-px-15 mb-1 pb-2">
                            <div class="media m-0 px-0">
                                <span class="p-0 m-0 b0">
                                    <div class="d-flex flex-row">
                                        <div class="p-0 g-mt-5 g-mr-5  justify-content-center"><img src="{{ asset('../resources/assets/img/thumbnails/app-'.$i.'.jpg') }}"></div>
                                    </div>
                                </span>
                            </div>
                        </div>
                        @endfor

                    </div>
                </div>
            </section>           
            
            <!-- 1 Column Body -->
            <div class="d-flex justify-content-between g-mt-0 g-mt-10--md">
                <div class="text-justify">
                    <p> The <a href="{{ $links['checklist_pdf'] }}" target="_blank" class="no-decoration"><span class="g-font-weight-600 font-italic g-color-primary">Active Shooter Incident Management 
                        Checklist</span></a>&trade; is designed for basic complexity through moderate complexity Active Shooter Events for law enforcement, fire, and EMS responders. 
                        The ASIM Checklist lays out responsibilities from the first arriving law enforcement officer through follow-on officers, fire and EMS responders, and supervisors. The ASIM Checklist identifies essential tasks to perform 
                        and sequences them in a logical order.
                    </p>
                    <p>
                        The ASIM Checklist is suitable for most communities, but each agency must evaluate if the Checklist is appropriate for their community, their staffing, and their risk. 
                    </p>

                    <h3 class="h3 g-color-black g-pt-10">Additional Information</h3>

                    <p> This application is an electronic version of the paper <a href="{{ $links['checklist_pdf'] }}" target="_blank" class="no-decoration"><span class="g-font-weight-600 font-italic g-color-primary">Active Shooter Incident Management 
                                Checklist</span></a>&trade; published on the C3 Pathways web site, where additional information is available.
                    <ul>
                        <li>
                            <a href="{{ URL::to('/aschecklist') }}" class="nav-link g-line-height-1 p-0 g-mb-10" target="_blank">
                                <span class="text-uppercase">@lang('messages.menu_course_asim')</span> @lang('messages.label_checklist') Home
                            </a>
                        </li>
                        <li>
                            <a href="{{ $links['checklist_pdf'] }}" class="nav-link g-line-height-1 p-0 g-mb-10" target="_blank">
                                Paper <span class="text-uppercase">@lang('messages.menu_course_asim')</span> @lang('messages.label_checklist') (PDF)
                            </a>
                        </li>
                        <li>
                            <a href="{{ $links['checklist_help_pdf'] }}" class="nav-link g-line-height-1 p-0 g-mb-10" target="_blank">
                                <span class="text-uppercase">@lang('messages.menu_course_asim')</span> @lang('messages.label_checklist') Help Guide (PDF 24 pages) explains usage and terminology
                            </a>
                        </li>
                    </ul>
                    </p>

                    <h3 class="h3 g-color-black g-pt-10">Obtaining Copyright Usage Permission</h3>

                    <p> Use of the <a href="{{ $links['checklist_pdf'] }}" target="_blank" class="no-decoration"><span class="g-font-weight-600 font-italic g-color-primary">Active Shooter Incident Management 
                        Checklist</span></a>&trade; requires authorization and written permission. 
                        There is <span class="g-font-weight-600 g-color-black">NO CHARGE</span> to use the Checklist (yes, <span class="g-font-weight-600 g-color-black">IT IS A FREE</span>, Checklist; no cost), BUT 
                        <span class="g-font-weight-500"><u>you must receive <a href="{{ $links['copyright_clearance_link'] }}">WRITTEN PERMISSION</a> from C3 Pathways to use it</u></span>.
                    </p>

                    <p>There is a quick and simple form on the web site that will immediately email you Copyright Permission after you submit.</p>
                    <ul>
                        <li><a class="nav-link g-line-height-1 p-0 g-mb-10" target="_blank" href="{{ $links['copyright_clearance_link'] }}" title="Get Copyright permission to use ASIM Checklist">@lang('messages.label_copyright_clearance') Form</a></li>
                    </ul>

                    <h3 class="h3 g-color-black g-pt-10">How to Use</h3>
                    <p>The <span class="text-uppercase">@lang('messages.menu_course_asim')</span> @lang('messages.label_checklist') is sequenced based on arrival of resources. </p>
                    <ul>
                        <li>The entry point of the Checklist is labeled <strong class="gold">&nbsp;START HERE&nbsp;</strong> and denoted with a gold dashed line around it.</li>
                        <li>Touch an item ONCE to complete (check mark)</li>
                        <li>Touch an item TWICE to defer (red circle)
                            <ul>
                                <li>Display deferred list by touching icon upper-right of screen</li>
                            </ul>
                        </li>
                        <li>Navigate to a sub checklist by touching a <strong class="sublist">LINKED ITEM</strong></li>
                        <li>Menu options
                            <ul>
                                <li>View Organizational Chart</li>
                                <li>Table of Contents</li>
                                <li>Start Over</li>
                                <li>Contact Info</li>
                            </ul>
                        </li>
                    </ul>
                    
                    <h3 class="h3 g-color-black g-pt-10">Caution</h3>
                    <p class="text-justify">Users are CAUTIONED that the statements contained herein may not be relevant or appropriate for their agency or region. Any new procedure or procedural change should be validated locally PRIOR TO ADOPTION. Please refer to the full text of the Copyright Clearance form for detailed requirements for using the Active Shooter Incident Management Checklist.</p>
                </div>
            </div>
            <!-- End 1 Column Body -->

        </div>

        <div class="col-lg-3 g-mt-10 g-mb-30">
            @include ('web.partials.aside-links-checklist')
        </div>
    </div>

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

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

<!-- JS Plugins Init. -->
<script >
    $(function() {

        // Carousel initialization (Clients Testimonial (Slick), Partnership, Responders Gallery)
        $.HSCore.components.HSCarousel.init('.js-carousel');

        $('#carouselPartners').slick('setOption', 'responsive', [{ // Partners
        breakpoint: 992,
            settings: {
            slidesToShow: 2
            }
        }, {
            breakpoint: 576,
            settings: {
            slidesToShow: 1
            }
        }], true);

        // Clients Testimonial (Slick)
        $('#carouselPics').slick('setOption', 'responsive', [{
            breakpoint: 992,
            settings: {
                slidesToShow: 2
            }
            }, {
            breakpoint: 576,
            settings: {
                slidesToShow: 1
            }
        }], true);

    });
</script>
@endsection