@extends('layouts.app')
@section('content')

    <!-- MAIN SECTION -->
    <article class="container mt-28">
      <h1
        class="text-xneutral-400 font-montserrat text-xl sm:text-2xl font-semibold"
      >
        Data Mahasiswa
      </h1>
      <p
        class="text-xneutral-200 font-montserrat text-sm sm:text-base font-semibold"
      >
        Mahasiswa berkompeten dibidangnya
      </p>
    @if ($mahasiswas->isEmpty())
      <div class="text-center text-xneutral-300 font-montserrat font-medium text-sm sm:text-base">
         No data available
      </div>
    @else
      <div class="mt-10 space-y-11">
        @foreach ($mahasiswas as $mahasiswa)
        <div class="flex flex-col items-center sm:flex-row gap-8 sm:gap-16">
          <img
            class="sm:col-span-2"
            src="{{ 'storage/' . $mahasiswa->Image }}"
            alt="{{ $mahasiswa->Nama_Lengkap }}"
          />
          <div class="sm:col-span-10 font-montserrat">
            <h3 class="text-base sm:text-lg font-semibold text-primary-200">
              {{ $mahasiswa->Nama_Lengkap }}
            </h3>
            <table
              class="table-auto sm:table-fixed font-medium text-xs sm:text-sm text-xneutral-300 mt-5"
            >
              <tbody>
                <tr>
                  <td class="w-24 sm:w-48 py-1">NIM</td>
                  <td class="w-4 sm:w-12">:</td>
                  <td>{{ $mahasiswa->NIM }}</td>
                </tr>
                <tr>
                  <td class="w-24 sm:w-48 py-1">Program Studi</td>
                  <td class="w-4 sm:w-12">:</td>
                  <td>{{ $mahasiswa->Prodi }}</td>
                </tr>
              </tbody>
            </table>
            </div>
          </div>
        @endforeach
      </div>
    @endif
  </article>

@endsection