<x-layout bodyClass="g-sidenav-show  bg-gray-200">
  <x-navbars.sidebar activePage="tables"></x-navbars.sidebar>
  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >
    <!-- Navbar -->
    <x-navbars.navs.auth titlePage="Tables"></x-navbars.navs.auth>
    <!-- End Navbar -->

    <a
      class="btn btn-success"
      href="{{ route('students.create') }}"
    > Create
      Student</a>

    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          <div class="card my-4">
            <div class="card-header position-relative mt-n4 z-index-2 mx-3 p-0">
              <div
                class="bg-gradient-primary shadow-primary border-radius-lg pb-3 pt-4"
              >
                <h6 class="text-capitalize ps-3 text-white">Authors table</h6>
              </div>
            </div>
            <div class="card-body px-0 pb-2">
              <div class="table-responsive p-0">
                <table class="align-items-center mb-0 table">
                  <thead>
                    <tr>
                      <th
                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                      >
                        name</th>
                      <th
                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
                      >
                        email</th>
                      <th
                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center"
                      >
                        Address</th>
                      <th
                        class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center"
                      >
                        Action</th>
                      <th class="text-secondary opacity-7"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <div class="d-flex px-2 py-1">
                          <div>
                            <img
                              class="avatar avatar-sm border-radius-lg me-3"
                              src="{{ asset('assets') }}/img/team-2.jpg"
                              alt="user1"
                            >
                          </div>
                          <div
                            class="d-flex flex-column justify-content-center">
                            <h6 class="mb-0 text-sm">John Michael</h6>
                            <p class="text-secondary mb-0 text-xs">
                              john@creative-tim.com
                            </p>
                          </div>
                        </div>
                      </td>
                      <td>
                        <p class="font-weight-bold mb-0 text-xs">Manager</p>
                        <p class="text-secondary mb-0 text-xs">Organization</p>
                      </td>
                      <td class="text-center align-middle text-sm">
                        <span
                          class="badge badge-sm bg-gradient-success">Online</span>
                      </td>
                      <td class="align-middle">
                        <a
                          class="text-secondary font-weight-bold text-xs"
                          data-toggle="tooltip"
                          data-original-title="Edit user"
                          href="javascript:;"
                        >
                          Edit
                        </a>

                        <a
                          class="text-secondary font-weight-bold text-xs"
                          data-toggle="tooltip"
                          data-original-title="Edit user"
                          href="javascript:;"
                        >
                          Delete
                        </a>
                      </td>
                    </tr>

                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <x-footers.auth></x-footers.auth>
    </div>
  </main>

</x-layout>
