@section('content')
    <article id="faq">
        @if($section = $page->getSection('cover'))
            <header class="page-cover">
                <img src="{{ asset($section->image->post->image) }}" alt="" class="cover">
                <div class="container">
                    <h1>{{ $section->post->title }}</h1>
                </div>
            </header>
            <section class="content page-title">
                <div class="container">
                    <h2>{{ $section->post->excerpt }}</h2>
                </div>
            </section>
        @endif
        @if($page->getSections('faq')->count())
            <section class="content accordion">
                <div class="container">
                    <dl>
                        @foreach($page->getSections('faq') as $section)
                            <dt class="{{ $loop->first ? 'active' : null }}"><span>{{ $section->post->title }}</span></dt>
                            <dd style="{{ $loop->first ? 'display: block;' : null }}">
                                <div class="content-html">
                                    {!! $section->post->content !!}
                                </div>
                            </dd>
                        @endforeach
                    </dl>
                </div>
            </section>
        @endif
        @if($section = $page->getSection('single-image'))
            <section class="content single-image">
                <div class="container">
                    <img src="{{ asset($section->image->post->image) }}" alt="" class="img-fluid">
                    <div class="content-html">
                        {!! $section->post->content !!}
                    </div>
                </div>
            </section>
        @endif
    </article>
@endsection

@push('scripts')
    <script>
      $(function() {
        $('dt').on('click', function() {
          var dd = $(this).next('dd');
          if(!$(dd).is(':visible')) {
            $(dd).slideDown();
            $(this).addClass('active');
          } else {
            $(dd).slideUp();
            $(this).removeClass('active');
          }

          return false;
        });
      });
    </script>
@endpush