<%layout('layouts/boilerplate')%>
  <div>
    <h1 class="pb-4">Explore Subjects</h1>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/faculty/<%=faculty%>">
            <%=faculty%>
          </a></li>
        <li class="breadcrumb-item"><a href="/faculty/<%=faculty%>/semester/<%=id%>">Semester <%=id%></a></li>
        <li class="breadcrumb-item"><a href="#">Subjects</a></li>
        <li class="breadcrumb-item active" aria-current="page">Explore Subjects</li>
      </ol>
    </nav>
    <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3 mb-4">
      <% if(typeof subjects !=='undefined' && subjects.length> 0) { %>
        <% subjects.forEach(function(subject, index) { %>
          <a href="/faculty/<%-faculty%>/semester/<%-id%>/<%-subject.code%>" class="col text-center semester__link">
            <div class="semester__img shadow">
              <img src="<%- subject.image %>" alt="<%- subject.code %>" loading="lazy">
            </div>
            <div class="pt-1"><%- subject.name %></div>
          </a>
          <% }) %>
            <% } %>
    </div>
  </div>