@extends('layouts.main')

@section('page-id', '6039028ed687fc288dd40aff')

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

@section('content')
  <div class="section transparent">
    <div class="wide-container">
      <div class="page-heading-wrapper position--relative">
        <h1 class="h1-2 mt-0 mb-0">{{ $mainCategory->title }}</h1>
        <div class="page-heading-button-filter-wrapper">
          <a href="{{ route('learn.technical-library') }}" 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 technical library</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">
            <li>
                <a href="{{ route('learn.technical-library-all') }}" class="news-filter-link">All</a>
              </li>
@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="w-col w-col-9 w-col-stack">
          <div class="articles-row">
@if (count($mainCategory->articles) > 0)
@foreach ($mainCategory->articles as $article)
            <div class="articles-column technical">
            @if (!$article->attached_document)
            <a href="{{ route('learn.technical-library.article', ['category' => $mainCategory->slug, 'article' => $article->slug]) }}" class="article-inner-wrapper technical w-inline-block">
@else
<div class="article-inner-wrapper technical w-inline-block">

              @endif

              <img src="{{ $article->asset_urls->thumbnail }}" loading="lazy" alt="" class="article-thumbnail technical">
                <div class="article-content-wrapper technical">
                  <div class="article-content-inner-wrapper">
                    <div class="article-category mb-20">{{ $mainCategory->title }}</div>
                    <h2 class="mt-0">{{ $article->title }}</h2>
                    <p>{{ $article->short_description }}</p>
                  </div>
                  @if ($article->attached_document)
                <div>
                <a class="featured-text-link track-pdf" href="{{ $article->asset_urls->attached_document }}" target="_blank" data-conversion-name="{{ $article->title }}">
                  Download Attached Document
                </a>
                </div>
              @else
                  <div class="featured-text-link">Learn More</div>
                  @endif
                </div>
                @if (!$article->attached_document)
              </a>
              @else
</div>
              @endif
            </div>
@endforeach
@else
            <div class="articles-column technical">
              No articles found for {{ $mainCategory->title }}
            </div>
@endif
          </div>
        </div>
      </div>
      <div class="divider mt-60 mb-10"></div>
    </div>
  </div>
@endsection