@extends('layouts.app')

@section('title', 'Blog - Herbal Solutions')
@section('body-class', 'blog-page')

@section('content')
    <!-- Page Title -->
    <div class="page-title dark-background">
      <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0">Blog</h1>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}">Home</a></li>
            <li class="current">Blog</li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

    <!-- Blog Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <!-- Blog Posts Section -->
          <section id="blog-posts" class="blog-posts section">
            <div class="row gy-4">
              <div class="col-12">
                <article>
                  <div class="post-img">
                    <img src="{{ asset('assets/img/blog/blog-1.jpg') }}" alt="Blog 1" class="img-fluid">
                  </div>
                  <h2 class="title">
                    <a href="#">Dolorum optio tempore voluptas dignissimos cumque fuga qui quibusdam quia</a>
                  </h2>
                  <div class="meta-top">
                    <ul>
                      <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">John Doe</a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="#"><time datetime="2022-01-01">Ene 1, 2022</time></a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 Comentarios</a></li>
                    </ul>
                  </div>
                  <div class="content">
                    <p>
                      Similique neque nam consequuntur ad non maxime aliquam quas. Quibusdam animi praesentium. Aliquam et laboriosam eius aut nostrum quidem aliquid dicta.
                    </p>
                    <div class="read-more">
                      <a href="#">Leer Más</a>
                    </div>
                  </div>
                </article>
              </div><!-- End post list item -->

              <div class="col-12">
                <article>
                  <div class="post-img">
                    <img src="{{ asset('assets/img/blog/blog-2.jpg') }}" alt="Blog 2" class="img-fluid">
                  </div>
                  <h2 class="title">
                    <a href="#">Nisi magni odit consequatur autem nulla dolorem</a>
                  </h2>
                  <div class="meta-top">
                    <ul>
                      <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">John Doe</a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="#"><time datetime="2022-01-01">Ene 1, 2022</time></a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 Comentarios</a></li>
                    </ul>
                  </div>
                  <div class="content">
                    <p>
                      Incidunt voluptate sit temporibus aperiam. Quia vitae aut sint ullam quis illum voluptatum et. Quo libero rerum voluptatem pariatur nam.
                    </p>
                    <div class="read-more">
                      <a href="#">Leer Más</a>
                    </div>
                  </div>
                </article>
              </div><!-- End post list item -->

              <div class="col-12">
                <article>
                  <div class="post-img">
                    <img src="{{ asset('assets/img/blog/blog-3.jpg') }}" alt="Blog 3" class="img-fluid">
                  </div>
                  <h2 class="title">
                    <a href="#">Possimus soluta ut id suscipit ea ut</a>
                  </h2>
                  <div class="meta-top">
                    <ul>
                      <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">John Doe</a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="#"><time datetime="2022-01-01">Ene 1, 2022</time></a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 Comentarios</a></li>
                    </ul>
                  </div>
                  <div class="content">
                    <p>
                      Aut iste neque ut illum qui perspiciatis similique recusandae non. Fugit autem dolorem labore omnis et. Eum temporibus fugiat voluptate enim tenetur sunt omnis.
                    </p>
                    <div class="read-more">
                      <a href="#">Leer Más</a>
                    </div>
                  </div>
                </article>
              </div><!-- End post list item -->

              <div class="col-12">
                <article>
                  <div class="post-img">
                    <img src="{{ asset('assets/img/blog/blog-4.jpg') }}" alt="Blog 4" class="img-fluid">
                  </div>
                  <h2 class="title">
                    <a href="#">Non rem rerum nam cum quo minus</a>
                  </h2>
                  <div class="meta-top">
                    <ul>
                      <li class="d-flex align-items-center"><i class="bi bi-person"></i> <a href="#">John Doe</a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-clock"></i> <a href="#"><time datetime="2022-01-01">Ene 1, 2022</time></a></li>
                      <li class="d-flex align-items-center"><i class="bi bi-chat-dots"></i> <a href="#">12 Comentarios</a></li>
                    </ul>
                  </div>
                  <div class="content">
                    <p>
                      Aspernatur rerum perferendis et sint. Voluptates cupiditate voluptas atque quae. Rem veritatis rerum enim et autem. Saepe atque cum eligendi eaque iste omnis a qui.
                    </p>
                    <div class="read-more">
                      <a href="#">Leer Más</a>
                    </div>
                  </div>
                </article>
              </div><!-- End post list item -->
            </div><!-- End blog posts list -->
          </section><!-- /Blog Posts Section -->

          <!-- Blog Pagination Section -->
          <section id="blog-pagination" class="blog-pagination section">
            <div class="container">
              <div class="d-flex justify-content-center">
                <ul>
                  <li><a href="#"><i class="bi bi-chevron-left"></i></a></li>
                  <li><a href="#">1</a></li>
                  <li><a href="#" class="active">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li>...</li>
                  <li><a href="#">10</a></li>
                  <li><a href="#"><i class="bi bi-chevron-right"></i></a></li>
                </ul>
              </div>
            </div>
          </section><!-- /Blog Pagination Section -->
        </div><!-- End Blog Posts Column -->

        <!-- Sidebar -->
        <div class="col-lg-4 sidebar">
          <div class="widgets-container">
            <!-- Search Widget -->
            <div class="search-widget widget-item">
              <h3 class="widget-title">Buscar</h3>
              <form action="">
                <input type="text" placeholder="Buscar...">
                <button type="submit" title="Search"><i class="bi bi-search"></i></button>
              </form>
            </div><!-- /Search Widget -->

            <!-- Categories Widget -->
            <div class="categories-widget widget-item">
              <h3 class="widget-title">Categorías</h3>
              <ul class="mt-3">
                <li><a href="#">General <span>(25)</span></a></li>
                <li><a href="#">Estilo de Vida <span>(12)</span></a></li>
                <li><a href="#">Viajes <span>(5)</span></a></li>
                <li><a href="#">Diseño <span>(22)</span></a></li>
                <li><a href="#">Creativo <span>(8)</span></a></li>
                <li><a href="#">Educación <span>(14)</span></a></li>
              </ul>
            </div><!-- /Categories Widget -->

            <!-- Recent Posts Widget -->
            <div class="recent-posts-widget widget-item">
              <h3 class="widget-title">Entradas Recientes</h3>
              <div class="post-item">
                <img src="{{ asset('assets/img/blog/blog-recent-1.jpg') }}" alt="Reciente 1" class="flex-shrink-0">
                <div>
                  <h4><a href="#">Nihil blanditiis at in nihil autem</a></h4>
                  <time datetime="2020-01-01">Ene 1, 2020</time>
                </div>
              </div>
              <div class="post-item">
                <img src="{{ asset('assets/img/blog/blog-recent-2.jpg') }}" alt="Reciente 2" class="flex-shrink-0">
                <div>
                  <h4><a href="#">Quidem autem et impedit</a></h4>
                  <time datetime="2020-01-01">Ene 1, 2020</time>
                </div>
              </div>
              <div class="post-item">
                <img src="{{ asset('assets/img/blog/blog-recent-3.jpg') }}" alt="Reciente 3" class="flex-shrink-0">
                <div>
                  <h4><a href="#">Id quia et et ut maxime similique</a></h4>
                  <time datetime="2020-01-01">Ene 1, 2020</time>
                </div>
              </div>
            </div><!-- /Recent Posts Widget -->

            <!-- Tags Widget -->
            <div class="tags-widget widget-item">
              <h3 class="widget-title">Etiquetas</h3>
              <ul>
                <li><a href="#">App</a></li>
                <li><a href="#">TI</a></li>
                <li><a href="#">Negocios</a></li>
                <li><a href="#">Mac</a></li>
                <li><a href="#">Diseño</a></li>
                <li><a href="#">Oficina</a></li>
                <li><a href="#">Creativo</a></li>
                <li><a href="#">Estudio</a></li>
                <li><a href="#">Inteligente</a></li>
                <li><a href="#">Consejos</a></li>
                <li><a href="#">Marketing</a></li>
              </ul>
            </div><!-- /Tags Widget -->
          </div>
        </div><!-- End Sidebar -->
      </div>
    </div><!-- End Blog Content -->
@endsection