@extends('users/layout')
@section('content')
<section>
<div>
<div class="background-holder overlay" style="background-image:url(template/assets/images/background-2.jpg);background-position: center bottom; height: 50px;">
</div><!--/.background-holder-->
<div class="container">
 <div class="row pt-6" data-inertia='{"weight":1.5}'>
  <div class="col-md-8 px-md-0 color-white" data-zanim-timeline="{}" data-zanim-trigger="scroll">
   <div class="overflow-hidden">
	<h1 class="color-white fs-4 fs-md-5 mb-0 zopacity" data-zanim='{"delay":0}'>{{__('Formation')}}</h1>
	<div class="nav zopacity" aria-label="breadcrumb" role="navigation" data-zanim='{"delay":0.1}'>
		<ol class="breadcrumb fs-1 pl-0 fw-700">
		<li class="breadcrumb-item">
			<a class="color-white" href="#">Accueil</a>
		</li>
		<li class="breadcrumb-item active" aria-current="page">{{__('Détails formation')}}
		</li>
		</ol>
	</div>
	</div>
 </div>
 </div>
 </div>
 <!--/.row-->
 </div><!--/.container-->
 </section>

<section class="background-11">
	<div class="container">
		<div class="row">
			<div class="col"><h5 class="text-center fs-2 fs-lg-3" style="margin-top: -80px;">{{__($formation->LibelleFormation)}}</h5>
				<hr class="short" data-zanim='{"from":{"opacity":0,"width":0},"to":{"opacity":1,"width":"4.20873rem"},"duration":0.8}' data-zanim-trigger="scroll"/>
			</div>
		</div>
   </div>
<div class="container-fluid">
	<style type="text/css">
	    .card {
	        background: #fff;
	        transition: .5s;
	        border: 0;
	        margin-bottom: 30px;
	        border-radius: .55rem;
	        position: relative;
	        width: 100%;
	        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
	    }
	    .card .body {
	        color: #444;
	        padding: 20px;
	        font-weight: 400;
	    }
	    .card .header {
	        color: #444;
	        padding: 20px;
	        position: relative;
	        box-shadow: none;
	    }
	    .single_post {
	        -webkit-transition: all .4s ease;
	        transition: all .4s ease
	    }

	    .single_post .body {
	        padding: 30px
	    }

	    .single_post .img-post {
	        position: relative;
	        overflow: hidden;
	        max-height: 500px;
	        margin-bottom: 30px
	    }

	    .single_post .img-post>img {
	        -webkit-transform: scale(1);
	        -ms-transform: scale(1);
	        transform: scale(1);
	        opacity: 1;
	        -webkit-transition: -webkit-transform .4s ease, opacity .4s ease;
	        transition: transform .4s ease, opacity .4s ease;
	        max-width: 100%;
	        filter: none;
	        -webkit-filter: grayscale(0);
	        -webkit-transform: scale(1.01)
	    }

	    .single_post .img-post:hover img {
	        -webkit-transform: scale(1.02);
	        -ms-transform: scale(1.02);
	        transform: scale(1.02);
	        opacity: .7;
	        filter: gray;
	        -webkit-filter: grayscale(1);
	        -webkit-transition: all .8s ease-in-out
	    }

	    .single_post .img-post:hover .social_share {
	        display: block
	    }

	    .single_post .footer {
	        padding: 0 30px 30px 30px
	    }

	    .single_post .footer .actions {
	        display: inline-block
	    }

	    .single_post .footer .stats {
	        cursor: default;
	        list-style: none;
	        padding: 0;
	        display: inline-block;
	        float: right;
	        margin: 0;
	        line-height: 35px
	    }

	    .single_post .footer .stats li {
	        border-left: solid 1px rgba(160, 160, 160, 0.3);
	        display: inline-block;
	        font-weight: 400;
	        letter-spacing: 0.25em;
	        line-height: 1;
	        margin: 0 0 0 2em;
	        padding: 0 0 0 2em;
	        text-transform: uppercase;
	        font-size: 13px
	    }

	    .single_post .footer .stats li a {
	        color: #777
	    }

	    .single_post .footer .stats li:first-child {
	        border-left: 0;
	        margin-left: 0;
	        padding-left: 0
	    }

	    .single_post h3 {
	        font-size: 20px;
	        text-transform: uppercase
	    }

	    .single_post h3 a {
	        color: #242424;
	        text-decoration: none
	    }

	    .single_post p {
	        font-size: 16px;
	        line-height: 26px;
	        font-weight: 300;
	        margin: 0
	    }

	    .single_post .blockquote p {
	        margin-top: 0 !important
	    }

	    .single_post .meta {
	        list-style: none;
	        padding: 0;
	        margin: 0
	    }

	    .single_post .meta li {
	        display: inline-block;
	        margin-right: 15px
	    }

	    .single_post .meta li a {
	        font-style: italic;
	        color: #959595;
	        text-decoration: none;
	        font-size: 12px
	    }

	    .single_post .meta li a i {
	        margin-right: 6px;
	        font-size: 12px
	    }

	    .single_post2 {
	        overflow: hidden
	    }

	    .single_post2 .content {
	        margin-top: 15px;
	        margin-bottom: 15px;
	        padding-left: 80px;
	        position: relative
	    }

	    .single_post2 .content .actions_sidebar {
	        position: absolute;
	        top: 0px;
	        left: 0px;
	        width: 60px
	    }

	    .single_post2 .content .actions_sidebar a {
	        display: inline-block;
	        width: 100%;
	        height: 60px;
	        line-height: 60px;
	        margin-right: 0;
	        text-align: center;
	        border-right: 1px solid #e4eaec
	    }

	    .single_post2 .content .title {
	        font-weight: 100
	    }

	    .single_post2 .content .text {
	        font-size: 15px
	    }

	    .right-box .categories-clouds li {
	        display: inline-block;
	        margin-bottom: 5px
	    }

	    .right-box .categories-clouds li a {
	        display: block;
	        border: 1px solid;
	        padding: 6px 10px;
	        border-radius: 3px
	    }

	    .right-box .instagram-plugin {
	        overflow: hidden
	    }

	    .right-box .instagram-plugin li {
	        float: left;
	        overflow: hidden;
	        border: 1px solid #fff
	    }

	    .comment-reply li {
	        margin-bottom: 15px
	    }

	    .comment-reply li:last-child {
	        margin-bottom: none
	    }

	    .comment-reply li h5 {
	        font-size: 18px
	    }

	    .comment-reply li p {
	        margin-bottom: 0px;
	        font-size: 15px;
	        color: #777
	    }

	    .comment-reply .list-inline li {
	        display: inline-block;
	        margin: 0;
	        padding-right: 20px
	    }

	    .comment-reply .list-inline li a {
	        font-size: 13px
	    }

	    @media (max-width: 640px) {
	        .blog-page .left-box .single-comment-box>ul>li {
	            padding: 25px 0
	        }
	        .blog-page .left-box .single-comment-box ul li .icon-box {
	            display: inline-block
	        }
	        .blog-page .left-box .single-comment-box ul li .text-box {
	            display: block;
	            padding-left: 0;
	            margin-top: 10px
	        }
	        .blog-page .single_post .footer .stats {
	            float: none;
	            margin-top: 10px
	        }
	        .blog-page .single_post .body,
	        .blog-page .single_post .footer {
	            padding: 30px
	        }
	    }
	</style>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />


	<div id="main-content" class="blog-page">
	    <div class="container">
	        <div class="row clearfix">
	            <div class="col-lg-8 col-md-12 left-box">
	                <div class="card single_post">
	                    <div class="body">
	                        <div class="img-post">
	                            <img class="d-block img-fluid" src="{{asset($formation->ImageFormation)}}" alt="First slide">
	                        </div>
	                        
	                        <h3><a href="javascript:void(0)">{{__($formation->LibelleFormation)}}</a></h3>
	                          {!! __($formation->DetailFormation) !!}
	                    </div>
	                    
	                </div>
	                            
	            </div>
	            <div class="col-lg-4 col-md-12 right-box">
	                <!-- <div class="card">
	                    <div class="body search">
	                        <div class="input-group m-b-0">
	                            <div class="input-group-prepend">
	                                <span class="input-group-text"><i class="fa fa-search"></i></span>
	                            </div>
	                            <input type="text" class="form-control" placeholder="Search...">                                    
	                        </div>
	                    </div>
	                </div> -->
	                <div class="card">
	                    <div class="header">
	                        <h2>Autres formations</h2>                        
	                    </div>
	                    <div class="body widget popular-post">
	                        <div class="row">
	                            <div class="col-lg-12">
	                            		                                @foreach($formations as $v_articles)
	                                @if($nb <6)
	                                <div class="single_post" style="padding-bottom: 10px">
	                                	<a href="{{url('detail_formation/'.$v_articles->IdFormation )}}">
	                                    <p class="m-b-0">{!! __($v_articles->LibelleFormation) !!}</p></a>
	                                                                            
	                                </div>
	                                	                                @endif
	                                @endforeach
	                            </div>
	                        </div>
	                    </div>
	                </div>
	                
	                
	            </div>
	            
	        </div>

	    </div>
	</div>



</div>
	</section>


  <style type="text/css">
		  @media(min-width: 1477px){
		  .card-height{
		  	height: 340px !important;
		   }
		  }
		  @media screen and (min-device-width: 1300px) and (max-device-width: 1476px){
		  .card-height{
		  	height: 400px !important;
		   }
		  }
		  @media screen and (min-device-width: 1150px) and (max-device-width: 1299px){
		  .card-height{
		  	height: 440px !important;
		   }
		  }
		  @media screen and (min-device-width: 1070px) and (max-device-width: 1142px){
		  .card-height{
		  	height: 490px !important;
		   }
		  }
  </style>


@endsection