@extends('layouts.base', ['bodyclass' => 'work-detail'])

@section('content')

  <section class="workdetail my-4 my-lg-8">
    <div class="container">
      <div class="grid my-3 my-lg-7 gap-3 gap-lg-7">
        <div class="g-col-11 g-col-lg-7">
          <h2 class="h1 lh-1 mb-2 d-lg-none chars overflow-hidden">{!! $page->title !!}</h2>
          <div class="fliphere">
            <figure class="rimg rimg--100-56 rimg--parallax">
              <img
                src="{{ str_replace('images', 'c/420x0', asset('images/' . $page->image )) }}" 
                  srcset="
                  {{ str_replace('images', 'c/420x0', asset('images/' . $page->image )) }} 420w,
                  {{ str_replace('images', 'c/600x0', asset('images/' . $page->image )) }} 600w,
                  {{ str_replace('images', 'c/1050x0', asset('images/' . $page->image )) }} 1050w"
                sizes="(min-width: 1200px) calc(.5833 * (100vw - 5rem)), calc(100vw - 32px)"
                loading="eager" alt="{{ $page->meta_title }}" data-speed="0.9">
              <div class="position-absolute bottom-0 m-2 gs-fin" data-delay="0.5">
                <a href="{!! $page->url !!}" target="_blank" rel="noopener" class="likeabutton">View case</a>
              </div>
            </figure>
          </div>
        </div>
        <div class="g-col-11 g-col-lg-5 d-flex flex-column justify-content-between">
          <h1 class="h1 lh-1 mb-4 d-none d-lg-block chars">{!! $page->title !!}</h1>
          <p>{!! $page->description !!}</p>

          <div class="grid projectinfo mt-5">
            <div class="g-col-5 overflow-hidden">
              <div data-delay="0.5">
                <strong>Role</strong>
              </div>
            </div>
            <div class="g-col-7 overflow-hidden">
              <div data-delay="0">
                {{ $page->role }}
              </div>
            </div>
            <div class="g-col-5 overflow-hidden">
              <div data-delay="0.4">
                <strong>Year</strong>
              </div>
            </div>
            <div class="g-col-7 overflow-hidden">
              <div data-delay="0">
                {{ $page->year }}
              </div>
            </div>
            <div class="g-col-5 overflow-hidden">
              <div data-delay="0.4">
                <strong>Special</strong>
              </div>
            </div>
            <div class="g-col-7 overflow-hidden">
              <div data-delay="0">
                {{ $page->specials }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  @includeIf('pages.works.' . $slug)

  <hr class="gs-fin">
  <section class="nav my-5 my-lg-9">
    <div class="container text-end">
      <a href="{{ URL::to( 'work/' . $page->next_work_url ) }}" class="d-inline-flex justify-content-end flex-column align-items-end p-3 mx-n3">
        <strong>More_</strong>
        <h2 class="h1 gs-lin">{!! $page->next_work_title !!}</h2>
        <span class="likeabutton gs-fin">See it &rarr;</span>
      </a>
    </div>
  </section>
  <hr>
@endsection