#if($lg.classtemplate) 
  #set($classtemplate = $mediaarchive.getData("classtemplate", $lg.classtemplate)) 
  #if($user.get("oe_edit_mode") == "editing")
    <a class="oe-dataedit" data-target="#edit-$classtemplate.id" href="#">
      <img src="/openedit/components/html/theme/images/htmledit.png" />
    </a>
  #end

  <div class="oe-editable" id="edit-$classtemplate.id" data-dataid="$classtemplate.id" data-field="shortdescription" data-searchtype="classtemplate">
    $!classtemplate.shortdescription
  </div>
#end 

#set($classtype = $lg.deliverytype) 
#if($pages.doesExist("$apphome/classes/${lg.id}/homepages/${classtype}.html"))
  $pages.include("$apphome/classes/${lg.id}/homepages/${classtype}.html", $context)
#else
    $pages.include("$apphome/classes/${lg.id}/coursesummary.html")

  #if($classes.size() != 0) 
    $pages.include("./timeline.html") 
  #end

 #set($plans = $lg.getTestPlans(false)) 
#if($plans.size() > 0)

<div class="container py-5">
  <h2 class="fw-bold text-center mb-4">Available Activities</h2>

  <div class="steps-wrapper position-relative">

    <!-- center guide line -->
    <div class="position-absolute start-50 translate-middle-x"
         style="width:2px; top:3rem; bottom:0; z-index:0;
                border-left:2px dashed rgba(0,0,0,.25);">
    </div>

    <div class="row row-cols-1 g-5">
      #foreach($plan in $plans)
        <div class="col position-relative">

          <!-- badge (always “play” since these are available) -->
          <div class="position-absolute top-0 start-50 translate-middle bg-white border rounded-circle shadow-sm
                      d-flex align-items-center justify-content-center"
               style="width:2.5rem;height:2.5rem;z-index:2;">
            <i class="bi bi-play-circle-fill text-primary"></i>
          </div>

          <!-- card -->
          <div class="card border-1 shadow">
            #if($plan.activitythumbnail)
              #set($asset = $mediaarchive.getAsset($plan.activitythumbnail))
              <img class="card-img-top img-fluid rounded-top"
                   style="max-height: 240px; object-fit: cover;"
                   src="$apphome/views/modules/asset/downloads/preview/thumb/${asset.sourcepath}/thumb.jpg" />
            #end

            <div class="card-body">
              <div class="d-flex justify-content-between align-items-start">
                <div>
                  <h5 class="card-title mb-1">$plan</h5>
                  <span class="badge bg-primary-subtle text-primary border border-primary-subtle">Activity</span>

                  <div class="mt-2 card-text oe-editable"
                       id="edit-$plan.id"
                       data-dataid="$plan.id"
                       data-field="shortdescription"
                       data-searchtype="testplan">
                    $!plan.shortdescription
                  </div>
                </div>

                #if($user.get("oe_edit_mode") == "editing")
                  <a class="oe-dataedit" data-target="#edit-$plan.id" href="#">
                    <img src="/openedit/components/html/theme/images/htmledit.png" />
                  </a>
                #end
              </div>

              <div class="mt-3 d-grid gap-2">
                <a href="$apphome/launchactivity.html?planid=${plan.id}&classid=${lg.id}"
                   class="btn btn-primary">Access Now</a>
              </div>
            </div>
          </div>
        </div>
      #end
    </div>

  </div>
</div>

#end
 
#end