@extends("profesor.layout.layout")
@section("styles")
    @php
        $titulo = "Componentes notas";
        $modulo = "Notas";
        $vista="Componentes";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
    <style>
        .custom-table tbody tr:hover {
            background-color: #6ec2ff; /* Cambia este color al que desees */
            transition: background-color 0.3s ease; /* Agrega transición para suavizar el cambio */
        }
    </style>
@endsection

@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
       @foreach($nivelesAsignados as $nivel)
            <div class="col-sm-2 mb-5 mb-xl-10">
                <a href="{{route("profesor::materias.nivel",$nivel)}}">
                    <div class="card card-rounded h-lg-100">
                        <div class="card-body py-5">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-primary">{{$nivel->nivel}}</span><br>
                                <span class="text-gray-400 mt-1 fw-semibold fs-6">{{$nivel->ciclo->educacion}}</span>
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
       @endforeach

    </div>
@endsection
@section("scripts")
    @vite('resources/js/app.js')
    <script>
        $(document).ready(function () {

        });
    </script>

@endsection