@extends('main')
@section('title')
@endsection
@section('styles')
  {!! Html::style(Theme::current()->assetPath.'/prettyPhoto/css/prettyPhoto.min.css') !!}

  <style>
  .btn-full-width {
    padding: 5px !important;
    text-align: center;
    width: 100%;
  }
  #wrap {
    max-width: 660px;
    margin: 100px auto;
  }
  .grow { transition: all .3s ease-in-out;
    border : 3px solid #ddd;
  }
  .grow:hover { transform: scale(1.05);   border : 3px solid #eee;    }
</style>
@endsection
@section('content')
  <div class="page-header">
    <div class="row-inner">
      <h1 class="page-title">{{ __('Video Gallery') }}</h1>
      <nav class="breadcrumbs-trail" role="navigation"><a href="{{ Route('mobily.site.home.page') }}" class="home">{{ __('Home') }}</a> <span class='breadcrumbs-separator'>&raquo;</span> {{ __('Video Gallery') }}</nav>
    </div>
  </div>
  <section class="wpb_row main_row  no-seperator" style="padding-top:35px; padding-bottom:50px;">
    <div class="row-inner">
      @foreach ($videos as $key => $video)
        <div class="wpb_column vc_column_container vc_col-sm-3">
          <div class="vc_column-inner ">
            <div class="wpb_wrapper">
              <div class="wpb_single_image wpb_content_element vc_align_left">
                <figure class="wpb_wrapper vc_figure">
                  <div class="vc_single_image-wrapper vc_box_shadow_3d  vc_box_border_green">
                    <a class="prettyphoto" rel="prettyPhoto['gall']" href="http://www.youtube.com/watch?v={{ $video->url }}">
                      <img width="400" height="300" src="http://img.youtube.com/vi/{{ $video->url }}/0.jpg" class="grow vc_single_image-img attachment-full" alt="{{ $video->title }}" title="{{ $video->title }}"  />
                    </a>
                  </div>
                </figure>
              </div>
              <div class="vc_empty_space" style="height: 15px"></div>
              <a class="btn-full-width button" href="http://www.youtube.com/watch?v={{ $video->url }}" title="{{ $video->title }}" target=""> {{ $video->title }}</a>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </section>
@endsection
@section('scripts')
  {!! Html::script(Theme::current()->assetPath.'/prettyPhoto/js/jquery.prettyPhoto.min.js') !!}
  <script type="text/javascript">
  jQuery(document).ready(function($){
    //  $("a[rel^='prettyPhoto']").prettyPhoto();
       $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
   });
  </script>
@endsection