@extends('layouts.app')

@section('title', 'Actualités')

@section('content')
<!-- Page wrapper for sticky footer -->
<!-- Wraps everything except footer to push footer to the bottom of the page if there is little content -->


<main class="page-wrapper">
  <!-- Page content -->
  <!-- Bloc Histoire -->
  <section class="py-5">
    <div class="container py-lg-3 py-xl-4 py-xxl-5">

      <!-- Page title + Layout switcher + Search form -->
      <div class="row align-items-end gy-3 mb-4 pb-lg-3 pb-1">
        <div class="col-lg-5 col-md-4">
          <h1 class="mb-2 mb-md-0">Actualités</h1>
        </div>
        <div class="col-lg-7 col-md-8">
          <form action="{{ route('post.search') }}" method="GET" class="row gy-2">
            <div class="col-lg-5 col-sm-6">

            </div>
            <div class="col-lg-7 col-sm-6">
              <div class="input-group">
                <input type="text" name="query" class="form-control pe-5 rounded" placeholder="Rechercher un article..." value="{{ request('query') }}">
                <button type="submit" class="position-absolute top-50 end-0 translate-middle-y me-3 zindex-5 fs-lg border-0 bg-transparent">
                  <i class="bi bi-search"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- post grid -->
      <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 gy-md-4 gy-2">
        @foreach ($posts as $post)
        <!-- Item -->
        <div class="col pb-3">
          @include('posts.card', ['post'=> $post])
        </div>
        @endforeach
      </div>
      <!-- Pagination -->
      @include('layouts.pagination', ['pagination' => $pagination ])

    </div>
  </section>

</main>

@endsection