@extends('main')

@section('content')
   @foreach($devices as $i=>$device)
       <section class="page-section fleet-item @if($i%2==0) bg-accent @else bg-base  @endif" id="{{$device->name}}">
           <div class="container">
               <div class="row">
                   <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
                       <h2 class="section-heading text-center h1">{{$device->name}}</h2>
                       @if(isset($device->intro))
                           <p class="section-intro text-center">{{$device->intro}}</p>
                       @endif
                   </div>
               </div>
               @if(isset($device->images))
                   <div class="fleet-item-gallery gallery cycle-slideshow content-image" data-cycle-swipe="true" data-cycle-slides="> .slide" data-cycle-log="false">
                       @foreach($device->images as $key=>$image)
                           <div class="slide">
                                <img src="{{$image}}" alt="">
                                <p class="caption"><a href="/poop/#">Title</a><span> - </span>This is the gallery caption</p>
                            </div>
                        @endforeach
                        <a class="cycle-next cycle-nav" href="#"><img src="/images/arrow-next.png" srcset="/images/arrow-next2x.png 2x, /images/arrow-next3x.png 3x" alt="Next"></a>
                        <a class="cycle-prev cycle-nav" href="#"><img src="/images/arrow-prev.png" srcset="/images/arrow-prev2x.png 2x, /images/arrow-prev3x.png 3x" alt="Next"></a>
                   </div>
               @endif
               <div class="row">
                   <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
                       @if(isset($device->secondary_heading))
                           <h3 class="h2">{{$device->secondary_heading}}</h3>
                       @endif
                       @if(isset($device->description))
                            <p>{{$device->description}}</p>
                       @endif
                       @if(isset($device->hardware))
                           <h4>Hardware</h4>
                           <ul class="clearfix">
                               @foreach($device->hardware as $hitem)
                                    <li>{{$hitem}}</li>
                               @endforeach
                           </ul>
                       @endif
                       @if(isset($device->software))
                           <h4>Software</h4>
                           <ul class="clearfix">
                               @foreach($device->software as $sitem)
                                   <li>{{$sitem}}</li>
                               @endforeach
                           </ul>
                       @endif
                   </div>
               </div>
               <div class="row">
                   <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
                        <div class="section-cta row">
                           <div class="col-sm-6">
                               <a class="btn btn-block btn-default" href="#">See it in Action</a>
                           </div>
                           <div class="col-sm-6">
                               <a class="btn btn-block btn-default" href="#">Request Information</a>
                           </div>
                        </div>
                    </div>
               </div>
            </div>
       </section>
   @endforeach
@stop
@section('footerargs')
    <script src="{{ asset('/js/jquery.cycle2.swipe.min.js') }}"></script>
    <script src="{{ asset('/js/jquery.cycle2.min.js') }}"></script>
    <script src="{{ asset('/js/stickyNav.js') }}"></script>
    <script>
        jQuery(window).load(function(){
           $('#sticky-nav').stickyScrollingNav({
               'navClass': 'fleet-nav'
           });
           @if(isset($sim))
               setTimeout(function(){
                   $('html, body').animate({
                       scrollTop: $('#{{$sim}}').offset().top-$('.cloned').outerHeight()
                   }, 200);
               },200);
            @endif
        });
    </script>
@stop