@extends('layouts.main')

@section('page-id', '606b46296b3662a2f5104c9b')

@section('content')
  <section class="section peach">
    <div class="wide-container">
      <div class="search-heading-wrapper">
        <h1 class="mt-0 mb-30">Learn</h1>
        <div class="mb-0 w-form">
          <form id="email-form-3" class="article-search-form center" action="{{ route('learn.search') }}" method="GET">
            <div class="article-search-input-wrapper"><img src="{{ url('images/search-icon-dark.svg') }}" loading="lazy" alt="" class="article-search-icon"><input type="text" class="article-search-input w-input" name="s" placeholder="Filter by product"></div><input type="submit" value="Search" class="featured-text-link submit w-button">
          </form>
        </div>
      </div>
      <div class="white-button-row-wrapper">
        <div class="buttons-row no-margins">
@foreach ($quickLinks as $quickLink)
          <div class="button-column">
            <a href="{{ $quickLink->hyperlink }}" class="button quick-link w-button">{{ $quickLink->name }}</a>
          </div>
@endforeach
        </div>
      </div>
      <div class="mb-20">
        <h2>Search Results…</h2>
        <div>
          <a href="{{ route('learn') }}" class="search-breadcrumb-link">Learn</a> <span class="search-breadcrumb-divider">/</span>
          <a href="#" class="search-breadcrumb-link w--current">{{ Request::get('s') }}</a>
        </div>
      </div>
      <div class="articles-row">
@foreach ($articles as $article)
@php
  $category = $article->categories()->first();
@endphp
        <div class="articles-column">
          <a href="{{ route('learn.technical-library.article', ['category' => $category->slug, 'article' => $article->slug]) }}" class="article-inner-wrapper w-inline-block"><img src="{{ $article->asset_urls->thumbnail }}" loading="lazy" alt="" class="article-thumbnail">
            <div class="article-content-wrapper">
              <div class="article-category">{{ $category->title }}</div>
              <h2 class="mt-0">{{ $article->title }}</h2>
              <p>{{ $article->short_description }}</p>
            </div>
            <div class="article-button">
              <div class="featured-text-link white">Learn More</div>
              <div class="article-button-chevron-button"><img src="{{ url('images/right-arrow-white.svg') }}" loading="lazy" alt="" class="article-button-chevron"></div>
            </div>
          </a>
        </div>
@endforeach
      </div>
    </div>
  </section>
@endsection