#if($classes && $classes.size() == 1)
  #set($lg = $classes.get(0))

  <div class="container py-5">
    <div class="row align-items-center">
      <div class="col-md-4 text-center mb-4 mb-md-0">
        #set($featureimage = $mediaarchive.getAsset($lg.classbanner))
        #set($thumb = $mediaarchive.asLinkToPreview($featureimage, "image600x600.webp"))

        #if($featureimage)
          <img src="$thumb" class="rounded-circle shadow-lg" style="width: 180px; height: 180px; object-fit: cover;" alt="$lg">
        #else
         
         <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width:180px; height: 180px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">
  <i class="bi bi-cpu fs-3"></i>
</div>
         
        #end
      </div>

      <div class="col-md-8">
        <h2 class="fw-bold mb-3">$lg</h2>
        <p class="text-muted fs-6">
          $!lg.shortdescription
          #if(!$lg.shortdescription)
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra, risus nec dignissim fermentum, sapien nunc laoreet nisl, vitae placerat sem nulla non risus.
          #end
        </p>

        <div class="mt-4">
          <a href="$home$apphome/launchgroup.html?classid=${lg.id}" class="btn btn-primary btn-lg me-3">[[Start Learning]]</a>
          <a href="#if($pages.canView("$apphome/classes/${lg.id}/instructor/reports/progress.html"))$apphome/classes/${lg.id}/instructor/reports/progress.html#else$apphome/classes/${lg.id}/progress.html#end" class="btn btn-outline-secondary btn-lg">[[Progress Review]]</a>
        </div>
      </div>
    </div>
  </div>

#else
  ## Use the previous grid layout for multiple classes
  <div class="container py-4">
    <h2 class="mb-4 text-primary fw-semibold">[[Your Courses]]</h2>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
      #foreach($lg in $classes)
        #set($show = true)
        #if($lg.adminonly == "true")
          #set($show = ($canmanagepods || $canadmin))
        #end

        #if($show)
          <div class="col d-flex align-items-start">
            <div class="d-flex align-items-center gap-3 w-100 border p-3 rounded-3 shadow-sm bg-white">
              
              #set($featureimage = $mediaarchive.getAsset($lg.classbanner))
              #set($thumb = $mediaarchive.asLinkToPreview($featureimage, "image300x300.webp"))

              <div class="flex-shrink-0">
                #if($featureimage)
                  <img src="$thumb" class="rounded-circle" style="width: 72px; height: 72px; object-fit: cover;" alt="$lg">
                #else
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 72px; height: 72px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">
  <i class="bi bi-cpu fs-3"></i>
</div>

                #end
              </div>

              <div class="flex-grow-1">
                <div class="fw-semibold mb-1">$lg</div>
                <div class="small text-muted mb-2">$!lg.shortdescription</div>
                <div>
                  <a href="$home$apphome/launchgroup.html?classid=${lg.id}" class="btn btn-sm btn-outline-primary me-2">[[Access]]</a>
                  <a href="#if($pages.canView("$apphome/classes/${lg.id}/instructor/reports/progress.html"))$apphome/classes/${lg.id}/instructor/reports/progress.html#else$apphome/classes/${lg.id}/progress.html#end" class="btn btn-sm btn-link">[[Review]]</a>
                </div>
              </div>

            </div>
          </div>
        #end
      #end
    </div>
  </div>
#end