@extends('layouts.front.app')

@section('content')
    <div class="container py-3">


      <div class="row justify-content-center">
        <div class="col-12 col-lg-11 col-xl-9 col-xxl-8">


          <div class="row justify-content-center">
            <div class="col-md-8 col-lg-8 col-xl-8">

                <div class="mb-5">
        <h1 class="h2 fw-bold">{{ $category->name }}</h1>
        <p class="text-secondary">
          {{ $category->description }}
        </p>
      </div>

              @for($i = 0; $i < 10; $i++)
              <div class="my-3">

                
                  <div class="card mb-3">
                    
                    <div class="card-body">
                      <h5 class="card-title">
                        <a class="text-decoration-none" href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post' => str_random() ]) }}">Here is why a kitten catches mice faster than an adult cat.</a></h5>
                      <p class="card-text">
                        This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                      </p>

                      <p class="card-text">
                        <small><a class="text-decoration-none" href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => 'technology' ]) }}">#technology</a> <a class="text-decoration-none" href="{{ route('home.country.category', ['country' => $country_locale->country_iso, 'category' => 'gadgets' ]) }}">#gadgets</a></small>
                        <small class="text-body-secondary ms-2">3 min read</small>
                      </p>

                    </div>
                    <a class="card-img-top" href="{{ route('home.country.post', ['country' => $country_locale->country_iso, 'post' => str_random() ]) }}">
                      <img src="https://placekitten.com/400/300" class="card-img-top rounded-bottom-2 rounded-top-0" alt="...">
                    </a>
                    
                  </div>

                
              </div>  
              @endfor

              <div>
                <nav class="col" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
              </div>
            </div>
{{--             <div class="col-md-4 col-lg-4 col-xl-4 bg-secondary">
              b
            </div> --}}
          </div>
        </div>

      </div>

    </div>
@endsection