@extends('themes.MyLittleHouseSchool.app')

@section('content')
<div class="main-container">
    <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-1">
        <div class="st-breadcrumb">
            <a href="/">{{__('Home')}}</a>
            <p class="slash">/</p>
            <a href="/{{$page->slug}}">{{$page->title}}</a>
        </div>
        <div class="white-container with-vc">
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 tablet-full" style="background: white; padding: 40px 0;">
                <div class="page-container">
                    <div class="vc_row wpb_row vc_row-fluid">
                        <div class="wpb_column vc_column_container vc_col-sm-12">
                            <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                    <h1 style="color: #444444;" class="vc_custom_heading">{{$page->title}}</h1>
									<br>
									<!-- div class="wpb_single_image wpb_content_element vc_align_left full-responsive-img">
                                        <figure class="wpb_wrapper vc_figure">
                                            <div class="vc_single_image-wrapper vc_box_border_grey">
                                                <img
                                                    width="{{$page->featuredImage['width']}}"
                                                    height="{{$page->featuredImage['height']}}"
                                                    src="{{$page->featuredImage['src']}}"
                                                    class="vc_single_image-img attachment-full"
                                                />
                                            </div>
                                        </figure>
                                    </div>
									<br -->
                                    <div class="wpb_text_column wpb_content_element letter-style-paragraph font-16">
                                        <div class="wpb_wrapper">

											<div class="tab">
											  @foreach($pages as $_page)
												  <a href="{{$_page->url()}}" class=" @if($_page->url()==$page->url()) active @endif tablinks" >{{$_page->title}}</a>
											  @endforeach
											</div>

											<div id="London" class="tabcontent">
											  <h3>{{$page->title}}</h3>
											  <p>{!! $page->content !!}</p>
											</div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
	<style>
	/* Style the tab */
	.tab {
	  float: right;
	  border: 1px solid #ccc;
	  background-color: #f1f1f1;
	  width: 30%;
	  min-height: 1000px;
	}

	/* Style the buttons inside the tab */
	.tab a {
	  display: block;
	  background-color: inherit;
	  color: black;
	  padding: 22px 16px;
	  width: 100%;
	  border: none;
	  outline: none;
	  text-align: left;
	  cursor: pointer;
	  transition: 0.3s;
	  font-size: 17px;
	}

	/* Change background color of buttons on hover */
	.tab a:hover {
	  background-color: #ddd;
	}

	/* Create an active/current "tab button" class */
	.tab a.active {
	  background-color: #ccc;
	}

	/* Style the tab content */
	.tabcontent {
	  float: left;
	  padding: 0px 12px;
	  border: 1px solid #ccc;
	  width: 70%;
	  border-right: none;
	  min-height: 1000px;
	}
	</style>
@endsection

@section('scripts')

@endsection