@extends('ui-theme.' . env('THEME_FOLDER') . '.layout.ui-main')
@section('content')
@php
$breadcrumbType = 'without_image';
$headerImage = asset('assets/images/breadcrumb-bg.jpg');
// Blog liste sayfasında navbar'ı koyu (dark theme) kullan
$navbarColor = 'dark';
@endphp
<section class="pt-10">
      <div class="container">
        <div class="row">
          <div class="col-12 px-0">
            <ul
              class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large"
              data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay":100, "staggervalue": 150, "easing": "easeOutQuad" }'
            >
              <li class="grid-sizer"></li>
              @foreach($blogs as $blog)
              <li class="grid-item">
                <div class="card bg-transparent border-0 h-100">
                  <div
                    class="blog-image position-relative overflow-hidden border-radius-4px"
                  >
                    <a href="{{ route('blog.show', $blog->slug) }}"
                      ><img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}"
                    /></a>
                  </div>
                  <div class="card-body px-0 pt-30px pb-30px xs-pb-15px">
                    <span class="fs-13 text-uppercase d-block mb-5px fw-500"
                      ><a href="{{ route('blog.show', $blog->slug) }}" class="blog-date">{{ $blog->published_at->format('d M Y') }}</a></span
                    >
                    <a
                      href="{{ route('blog.show', $blog->slug) }}"
                      class="card-title alt-font fw-600 fs-17 lh-30 text-dark-gray d-inline-block w-95 xs-w-100"
                      >{{ $blog->title }}</a>
                  </div>
                </div>
              </li>
              @endforeach
            </ul>
          </div>
          <!-- <div
            class="col-12 mt-3 sm-mb-3 d-flex justify-content-center"
            data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay":100, "staggervalue": 150, "easing": "easeOutQuad" }'
          >
            <ul class="pagination pagination-style-01 fs-13 fw-500 mb-0">
              <li class="page-item">
                <a class="page-link" href="#"
                  ><i
                    class="feather icon-feather-arrow-left fs-18 d-xs-none"
                  ></i
                ></a>
              </li>
              <li class="page-item"><a class="page-link" href="#">01</a></li>
              <li class="page-item active">
                <a class="page-link" href="#">02</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">03</a></li>
              <li class="page-item"><a class="page-link" href="#">04</a></li>
              <li class="page-item">
                <a class="page-link" href="#"
                  ><i
                    class="feather icon-feather-arrow-right fs-18 d-xs-none"
                  ></i
                ></a>
              </li>
            </ul>
          </div> -->
        </div>
      </div>
    </section>

@endsection