@extends('layouts.front.app')

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

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

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

              @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">Updated 3 mins ago</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" alt="...">
                    </a>
                    
                  </div>

                
              </div>  
              @endfor
            </div>
            <div class="col-md-4 col-lg-4 col-xl-4 bg-secondary">
              b
            </div>
          </div>
        </div>

      </div>

    </div>
@endsection