@extends('main')
@section('styles')
<style media="screen">
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width: 100%;
max-width: 600px;
max-height: 400px;
margin: auto;
border: 5px solid #ddd;
 box-shadow: 0 7px 10px -4px #0e8a28;

}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
@endsection
@section('page-title')
@endsection
@section('body_class') class="blog-page" @endsection
  @section('content')
    <div class="breadcrumbs">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <ul>
              <li class="home">
                <a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }} <span>/</span></a>
              </li>
              <li>
                <a href="{{ Route('mobily.index.news') }}">{{ __('Meals Online') }}<span>/</span></a>
              </li>
              <li>
                {{ $meal->title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main-container col2-right-layout">
      <div class="container">
        <div class="row">
          <div class="col-sm-9 col-xs-12">
            <div class="col-main">
              <div class="page-title">
                <h1>{{ $meal->title }}</h1>
              </div>
              <div class="blog-wrapper" id="main">
                <div class="site-content" id="primary">
                  <div role="main" id="content">
                    <article class="blog_entry">
                      <div class="entry-content">
                        <div class="videoWrapper">
                          <iframe width="600" height="349" src="http://www.youtube.com/embed/{{ $meal->video }}?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
                        </div>

                        <div class="entry-content">

                          {!! @$meal->content !!}
                        </div>
                      </div>
                      <footer class="entry-meta"></footer>
                      </article>
                    </div>
                  </div>
                  <div class="pager">
                    <p class="amount"> </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-right sidebar col-sm-3 col-xs-12">
              <div class="widget_wrapper13">

                @widget('ListCategoriesMenu')
                @widget('Sidebar\DeliveryReturns')

              </div>
            </div>
          </div>
        </div>
      </div>
    @endsection
    @section('scripts')
    @endsection