@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">All</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 w--current">All</a>
            </li>
            @foreach ($categories as $category)
            <li>
              <a href="{{ route('learn.technical-library.category', ['category' => $category->slug]) }}"
                class="news-filter-link">{{ $category->title }}</a>
            </li>
            @endforeach
          </ul>
        </div>
      </div>
      <div class="w-col w-col-9 w-col-stack">
        <div class="articles-row">
          @if (count($articles) > 0)
          @foreach ($articles as $article)
          <div class="articles-column technical">
            @if (!$article->attached_document)
            <a href="{{ route('learn.technical-library.article', ['category' => $article->categories()->first()->slug, 'article' => $article->slug]) }}"
              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">{{ $article->categories()->first()->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>
            @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