---
import { Image } from 'astro:assets';
import Logo from '../../assets/svg/logo.svg';
import { getAllCourses, filterCoursesByCloud } from '../../libs/courses';
import { getCareers } from '../../libs/careers';
import { slugifyCourse } from '../../utils/text';

const awsCourses = filterCoursesByCloud(getAllCourses(), ['aws']);
const gcpCourses = filterCoursesByCloud(getAllCourses(), ['gcp']);
const azrCourses = filterCoursesByCloud(getAllCourses(), ['azr']);
const careers = await getCareers();
---

<header id="header" class={`navbar navbar-expand-lg navbar-end navbar-sticky-top navbar-dark root`}>
  <div class="container position-relative">
    <nav class="js-mega-menu navbar-nav-wrap">
      <a class="navbar-brand" id="imagotipo_header" href="/" aria-label="ImagoTipo">
        <Image class="navbar-brand-logo img-fluid" src={Logo} alt="Logo" />
      </a>
      <button
        class="navbar-toggler text-white"
        id="navbar_toggle"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-default">
          <i class="bi-list"></i>
        </span>
        <span class="navbar-toggler-toggled">
          <i class="bi-x"></i>
        </span>
      </button>
      <div class="collapse navbar-collapse navbar-scroll" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle pb-3"
              href="#"
              id="carreras_header"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
              >Carreras
            </a>
            <div
              class="dropdown-menu bg-secondary"
              aria-labelledby="dropdownSubMenu"
              style="min-width: 14rem"
            >
              {careers.map((career: any) => (
                <a
                  class="dropdown-item text-white"
                  id={career.slug + '_header'}
                  href={`/carreras/${career.slug}/`}
                  role="button"
                  aria-expanded="false"
                >
                  {career.name}
                </a>
              ))}
            </div>
            <div class="nav-indicator nav-indicator--blue"></div>
          </li>
          <li class="nav-item">
            <a
              class="nav-link dropdown-toggle pb-3"
              href=`/cursos/`
              id="cursos_header"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
              >Cursos
            </a>
            <div class="dropdown-menu w-100 bg-secondary text-white" aria-labelledby="cursos_header">
              <div class="row">
                <div class="col-lg-3 d-none d-lg-block">
                  <div class="navbar-dropdown-menu-banner">
                    <div class="navbar-dropdown-menu-banner-content">
                      <div class="mb-4">
                        <span class="h2 d-block text-white">Todos los Cursos</span>
                        <p>Más de 60 cursos esperandote para desarrollar tu carrera laboral</p>
                      </div>
                      <a class="btn btn-primary btn-transition" href=`/cursos/`
                      style="font-weight: 600; font-size: large;">
                      Más Cursos 
                      <i class="bi-chevron-right small"></i></a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-9">
                  <div class="navbar-dropdown-menu-inner">
                    <div class="row">
                      <div class="col-sm">
                        <span class="dropdown-header">Amazon Web Services</span>
                        {awsCourses.map((course: any) => (
                          <a class="dropdown-item text-white"
                            id={course.id}
                            href={'/cursos/'+slugifyCourse(course.name+'-'+course.level)+'/'}
                            >{course.name}
                            <!-- <span class="badge bg-course text-dark rounded-pill ms-1">{course.data.level}</span> -->
                          </a>
                        ))}
                      </div>
                      <div class="col-sm">
                        <span class="dropdown-header">Google Cloud Platform</span>
                        {gcpCourses.map((course: any) => (
                          <a class="dropdown-item text-white"
                            id={course.id}
                            href={'/cursos/'+slugifyCourse(course.name+'-'+course.level)+'/'}
                            >{course.name}
                            <!-- <span class="badge bg-course text-dark rounded-pill ms-1">{course.data.level}</span> -->
                          </a>
                        ))}                    
                      </div>                
                      <div class="col-sm">
                        <span class="dropdown-header">Microsoft Azure</span>
                        {azrCourses.map((course: any) => (
                          <a class="dropdown-item text-white"
                            id={course.id}
                            href={'/cursos/'+slugifyCourse(course.name+'-'+course.level)+'/'}
                            >{course.name}
                            <!-- <span class="badge bg-course text-dark rounded-pill ms-1">{course.data.level}</span> -->
                          </a>
                        ))}                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-indicator nav-indicator--green"></div>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="blog_header" href="/blog/">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nosotros_header" href="/about/">Nosotros</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-primary btn-transition" id="aplica_header" href="/contact/">¿Chateamos?</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

<script>
  const menuButton = document.querySelector('#navbar_toggle');
  menuButton?.addEventListener('click', () => {
    document.querySelector('body')?.classList.toggle('overflow-hidden');
  });
</script>

<style>
  .root {
	background-color: var(--bs-body-bg);
	z-index: 20 !important;

	.banner {
		font-size: large;
	}
}
</style>
