@extends('layouts.public')

@section('titre', 'Actualités — InnerHayti')

@section('content')
<section class="block">
  <div class="wrap">
    <div class="block-head"><h2>Actualités</h2></div>

    <div class="cat-tabs">
      <a class="cat-tab {{ !$rubrique ? 'active' : '' }}" href="{{ route('articles.index') }}">Tout</a>
      <a class="cat-tab {{ $rubrique==='actualites' ? 'active' : '' }}" href="{{ route('articles.index', ['rubrique'=>'actualites']) }}">Actualités</a>
      <a class="cat-tab {{ $rubrique==='ayitizana' ? 'active' : '' }}" href="{{ route('articles.index', ['rubrique'=>'ayitizana']) }}">Ayitizana</a>
      <a class="cat-tab {{ $rubrique==='infos_utiles' ? 'active' : '' }}" href="{{ route('articles.index', ['rubrique'=>'infos_utiles']) }}">Infos-Utiles</a>
    </div>

    @if($articles->isEmpty())
      <p style="color:#6E6E6E;padding:24px 0">Aucun article pour le moment.</p>
    @else
      <div class="art-grid">
        @foreach($articles as $article)
          <a class="art-card" href="{{ route('article.show', $article) }}">
            <div class="art-img">
              @if($article->image)
                <img src="{{ asset('storage/'.$article->image) }}" alt="{{ $article->titre }}">
              @endif
            </div>
            <div class="art-body">
              <span class="art-rubrique">{{ $article->rubrique->getLabel() }}</span>
              <h3>{{ $article->titre }}</h3>
              @if($article->extrait)<p>{{ $article->extrait }}</p>@endif
              <div class="art-meta">{{ $article->publie_le?->format('d/m/Y') }}</div>
            </div>
          </a>
        @endforeach
      </div>

      @if($articles->hasPages())
      <div class="pagination">
        @if($articles->previousPageUrl())<a class="btn btn-ghost" href="{{ $articles->previousPageUrl() }}">← Précédent</a>@endif
        <span>Page {{ $articles->currentPage() }} sur {{ $articles->lastPage() }}</span>
        @if($articles->nextPageUrl())<a class="btn btn-ghost" href="{{ $articles->nextPageUrl() }}">Suivant →</a>@endif
      </div>
      @endif
    @endif
  </div>
</section>
@endsection