@extends('layouts.sneat')

@section('title', 'Pagination and breadcrumbs - UI elements')

@section('content')
  <h4 class="py-3 mb-4">
    <span class="text-muted fw-light">UI elements /</span> Pagination and breadcrumbs
  </h4>

  <div class="card mb-4">
    <h5 class="card-header">Pagination</h5>
    <!-- Basic Pagination -->
    <div class="card-body">
      <div class="row">
        <div class="col-lg-6">
          <small class="text-light fw-medium">Basic</small>
          <div class="demo-inline-spacing">
            <!-- Basic Pagination -->
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li class="page-item first">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                </li>
                <li class="page-item last">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <!--/ Basic Pagination -->
            <!-- Basic rounded Pagination -->
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-rounded">
                <li class="page-item first">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                </li>
                <li class="page-item last">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <!--/ Basic rounded Pagination -->


          </div>
        </div>
        <div class="col-lg-6">
          <small class="text-light fw-medium">Basic Pagination Shape</small>
          <div class="demo-inline-spacing">
            <!-- Outline Pagination -->
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-outline-primary">
                <li class="page-item first">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                </li>
                <li class="page-item last">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <!--/ Outline Pagination -->
            <!-- Outline rounded Pagination -->
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-rounded pagination-outline-primary">
                <li class="page-item first">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-right"></i></a>
                </li>
                <li class="page-item last">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <!--/ Outline rounded Pagination -->
          </div>
        </div>
      </div>
    </div>
    <!--/ Basic Pagination -->

  </div>
  <!-- Pagination Sizes -->
  <div class="card mb-4">
    <h5 class="card-header">Sizes & Alignments</h5>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-4">
          <small class="text-light fw-medium">Sizes</small>
          <div class="demo-inline-spacing">
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-sm">
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i
                      class="tf-icon mdi mdi-chevron-double-left mdi-14px"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i
                      class="tf-icon mdi mdi-chevron-double-right mdi-14px"></i></a>
                </li>
              </ul>
            </nav>
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-lg">
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i
                      class="tf-icon mdi mdi-chevron-double-left mdi-20px"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i
                      class="tf-icon mdi mdi-chevron-double-right mdi-20px"></i></a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <div class="col-lg-8">
          <small class="text-light fw-medium">Alignments</small>
          <div class="demo-inline-spacing">
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <nav aria-label="Page navigation">
              <ul class="pagination justify-content-center">
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
            <nav aria-label="Page navigation">
              <ul class="pagination justify-content-end">
                <li class="page-item prev">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-left"></i></a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">2</a>
                </li>
                <li class="page-item active">
                  <a class="page-link" href="javascript:void(0);">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="javascript:void(0);">5</a>
                </li>
                <li class="page-item next">
                  <a class="page-link" href="javascript:void(0);"><i class="tf-icon mdi mdi-chevron-double-right"></i></a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ Pagination Sizes -->

  <!-- Breadcrumb -->
  <div class="card">
    <h5 class="card-header">Breadcrumbs</h5>
    <div class="card-body">
      <!-- Basic Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>
      <!-- Basic Breadcrumb -->
      <!-- Custom style1 Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-style1">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>
      <!--/ Custom style1 Breadcrumb -->
      <!-- Custom style2 Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb breadcrumb-style2">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);">Library</a>
          </li>
          <li class="breadcrumb-item active">Data</li>
        </ol>
      </nav>
      <!--/ Custom style2 Breadcrumb -->
      <!-- Basic Breadcrumb with icon -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item">
            <a href="javascript:void(0);" class="d-flex align-items-center"><i
                class="mdi mdi-star me-1 text-body"></i>Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:void(0);" class="d-flex align-items-center"><i
                class="mdi mdi-star me-1 text-body"></i>Library</a>
          </li>
          <li class="breadcrumb-item active">
            <a href="javascript:void(0);" class="d-flex align-items-center"><i
                class="mdi mdi-star me-1 text-body"></i>Data</a>
          </li>
        </ol>
      </nav>
      <!--/ Basic Breadcrumb with icon -->
    </div>
  </div>
  <!--/ Breadcrumb -->
@endsection