@extends('layouts.main')

@section('page-id', isset($pageId) ? $pageId : '60390dc986705873eb2e77d5')

@section('body-class', 'sand')

@section('content')
  <div class="section transparent">
    <div class="wide-container">
      <div class="page-heading-wrapper position--relative reverse with-article">
        <h1 class="h1-2 mt-0 mb-0">{{ isset($category) ? $category->title : $mainCategory->title }}</h1>
        <div class="page-heading-button-filter-wrapper">
          <a href="{{ route('learn.technical-library.category', ['category' => $mainCategory->slug]) }}" class="back-button with-heading w-inline-block"><img src="{{ url('images/left-chevron.svg') }}" loading="lazy" width="36" height="13" alt="">
            <div>Back to list</div>
          </a>
          <div class="filter-by-wrapper">
            <div>Filter By:</div>
          </div>
        </div>
      </div>
      <div class="news-columns w-row">
        <div class="news-filter-column w-col w-col-3 w-col-stack">
          <div class="news-filter">
            <div class="news-filter-heading">
              <div>Select a Category</div>
            </div>
            <ul role="list" class="news-filter-list w-list-unstyled">
@foreach ($categories as $category)
              <li>
                <a href="{{ route('learn.technical-library.category', ['category' => $category->slug]) }}" class="news-filter-link {{ $mainCategory->id === $category->id ? 'w--current' : '' }}">{{ $category->title }}</a>
              </li>
@endforeach
            </ul>
          </div>
        </div>
        <div class="article-column w-col w-col-9 w-col-stack">
          <article class="article-sheet no-heading">
            <div class="article-category">{{ $mainCategory->title }}</div>
            <h1 class="mt-0">{{ $article->title }}</h1>
@if ($article->main_image)
            <div class="mt-40 mb-40">
              <figure class="article-figure without-green-ackground"><img src="{{ $article->asset_urls->main_image }}" loading="lazy" alt=""></figure>
            </div>
@endif
@if ($article->template_type === 'q-a')
@php
  $questions = json_decode($article->body);
@endphp
            <div class="collapses mb-40 mt-20">
@foreach ($questions as $question)
              <div class="collapse">
                <div class="collapse-header">
                  <div>{{ $question->title }}</div><img src="{{ url('images/down-arrow.svg') }}" loading="lazy" style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0deg) skew(0, 0)" alt="" class="collapse-arrow">
                </div>
                <div style="display:none" class="collapse-body">
                  <p class="pb-20 mb-0">{{ $question->content }}</p>
                </div>
              </div>
@endforeach
            </div>
@else
            <div class="article-content w-richtext">{!! $article->body !!}</div>
@endif
            <div class="article-footer">
              <div class="article-footer-share-wrapper">

              <a href="javascript:fbshareCurrentPage()" class="article-social-icon-link w-inline-block"><img src="{{ url('images/facebook-icon.svg') }}" loading="lazy" width="24" height="24" alt="" class="article-social-icon"></a>
                <a href="javascript:twshareCurrentPage()" class="article-social-icon-link w-inline-block"><img src="{{ url('images/twitter-icon.svg') }}" loading="lazy" width="24" height="20" alt="" class="article-social-icon"></a>
                <a href="mailto:?Subject={{ $article->title }}&body={{ url()->current() }}" class="article-social-icon-link w-inline-block"><img src="{{ url('images/mail-icon.svg') }}" loading="lazy" width="21" height="17" alt="" class="article-social-icon"></a>


              </div>
@if ($article->attached_document)
              <div class="divider mt-20 mb-20"></div>
              <div class="article-footer-download-wrapper">
                <a href="{{ $article->asset_urls->attached_document }}" target="_blank" class="article-footer-download-link w-inline-block track-pdf" data-conversion-name="{{ $article->title }}">
                  <div class="article-footer-download-icon-wrapper"><img src="{{ url('images/download-icon.svg') }}" loading="lazy" alt=""></div>
                  <div>Download Attached Document</div>
                </a>
              </div>
@endif
              <div class="divider mt-20 mb-30"></div>
            </div>
          </article>
        </div>
      </div>
      <div class="divider mt-60 mb-10 hide-tablet"></div>
    </div>
  </div>
@endsection

@section('custom_scripts')
<script>
    function fbshareCurrentPage() {
      window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
      return false;
    }
    function twshareCurrentPage() {
      window.open("https://twitter.com/share?url="+escape(window.location.href)+"&text="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbar=yes,height=300,width=600');
      return false;
    }
</script>
@endsection