<turbo-stream action="update" target="provider_detail_tab_slot"><template><turbo-stream action="update" target="provider_detail_tab_slot">
  <template>
    <div class="flex flex-col gap-4">
      <h2 class="text-lg sm:text-xl font-bold text-black-800">About</h2>
        <div class="w-full mb-20 text-black text-sm font-normal">
          
  
  Rowan College at Burlington County, located in Pemberton, NJ, offers accessible, high-quality education. The college provides diverse academic programs with flexible scheduling options to support all learners, including adult students. Known for academic excellence and a vibrant campus life, the college has a rich history of serving the community. Awards and recognition highlight commitment to student success. Notable programs prepare students for transfer and career opportunities. Experience a supportive learning environment designed to help students achieve educational and professional goals.



        </div>

      <!-- Graduate vs Undergraduate Enrollment Chart -->
      <h2 class="text-lg sm:text-xl font-bold text-black-800 mt-4">Enrollment Distribution</h2>
        <div class="p-4 bg-white rounded-lg shadow-md mb-6">
          <h4 class="text-base font-medium text-gray-800 mb-3">Graduate vs Undergraduate Enrollment</h4>
          
          <div class="flex flex-col md:flex-row items-center justify-center gap-8">
            <!-- Full pie chart container -->
            <div class="relative w-60 h-60 mb-4 md:mb-0">
              <!-- Full pie with conic gradient -->
              <div class="absolute inset-0">
                <div class="w-full h-full rounded-full overflow-hidden">
                  <div class="w-full h-full rounded-full" 
                      style="background: conic-gradient( #1a5850 0deg 0.0deg, #3eb2a6 0.0deg 360deg);">
                  </div>
                </div>
              </div>
          
              <!-- Overlay for hover effects -->
              <div class="absolute inset-0 rounded-full">
                <!-- Graduate segment hover area -->
                <div class="absolute inset-0 w-full h-full cursor-pointer group" 
                style="clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);">
                  <div class="absolute inset-0 bg-[#1a5850] opacity-0 group-hover:opacity-20 transition-opacity duration-300 rounded-full"></div>
                  <div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="bg-[#1a5850] text-white text-xs rounded px-2 py-1 whitespace-nowrap">
                      Graduate: 0.0%
                    </div>
                  </div>
                </div>
                
                <!-- Undergraduate segment hover area -->
                <div class="absolute inset-0 w-full h-full cursor-pointer group"
                style="clip-path: polygon(50% 50%, 50% 0, 100.0% 50.0%, 100.0% 50.000000000000014%);">
                  <div class="absolute inset-0 bg-[#3eb2a6] opacity-0 group-hover:opacity-20 transition-opacity duration-300 rounded-full"></div>
                  <div class="absolute top-2/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="bg-[#3eb2a6] text-white text-xs rounded px-2 py-1 whitespace-nowrap">
                      Undergraduate: 100.0%
                    </div>
                  </div>
                </div>
              </div>
            </div>
        
            <!-- Legend -->
            <div class="flex flex-col gap-3">
              <div class="flex items-center gap-2 group cursor-pointer">
                <div class="w-4 h-4 rounded-full bg-[#1a5850] group-hover:ring-2 group-hover:ring-indigo-300 transition-all"></div>
                <span class="text-sm font-medium group-hover:text-[#1a5850] transition-colors">Graduate: 0.0%</span>
              </div>
              <div class="flex items-center gap-2 group cursor-pointer">
                <div class="w-4 h-4 rounded-full bg-[#3eb2a6] group-hover:ring-2 group-hover:ring-blue-300 transition-all"></div>
                <span class="text-sm font-medium group-hover:text-[#3eb2a6] transition-colors">Undergraduate: 100.0%</span>
              </div>
              <div class="text-sm text-gray-600 mt-2">
                Total Enrollment: 5,828
              </div>
            </div>
          </div>
        </div>

      <!-- Graduation Rate Chart -->
      <h2 class="text-lg sm:text-xl font-bold text-black-800">Graduation Rate</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
          <!-- Overall Graduation Rate Card -->
          <div class="p-4 bg-white rounded-lg shadow-md">
            <h4 class="text-base font-medium text-gray-800 mb-3">This Institution's Graduation Rate</h4>
            <div class="flex flex-col items-center">
              <div class="relative w-40 h-40 mb-2">
                <div class="absolute inset-0 rounded-full" style="background: conic-gradient(#3eb2a6 29.12%, #e5e7eb 29.12% 100%);"></div>
                <div class="absolute inset-3 bg-white rounded-full flex items-center justify-center">
                  <span class="text-2xl font-bold text-gray-800">29.12%</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Transfer Student Success Card -->
          <div class="p-4 bg-white rounded-lg shadow-md">
            <h4 class="text-base font-medium text-gray-800 mb-3">Similar Insitution's Graduation Rate</h4>
            <div class="flex flex-col items-center">
              <div class="relative w-40 h-40 mb-2">
                <div class="absolute inset-0 rounded-full" style="background: conic-gradient(#3eb2a6 50.93%, #e5e7eb 50.93% 100%);"></div>
                <div class="absolute inset-3 bg-white rounded-full flex items-center justify-center">
                  <span class="text-2xl font-bold text-gray-800">50.9%</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      <h2 class="text-lg sm:text-xl font-bold text-black-800">Transfer Student Completion</h2>
        <div class="p-4 bg-white rounded-lg shadow-md mb-6">
          
          <div class="flex flex-col gap-4">
            <!-- The bar graph -->
            <div class="relative h-32">
              <!-- Horizontal scale line -->
              <div class="absolute top-16 left-0 right-0 h-0.5 bg-gray-200"></div>
              
              <!-- National average vertical marker -->
              <div class="absolute top-12 h-8 w-0.5 bg-gray-400 left-1/2"></div>
              
              <!-- Scale markers -->
              <div class="absolute top-14 h-4 w-0.5 bg-gray-300 left-0"></div>
              <div class="absolute top-14 h-4 w-0.5 bg-gray-300 left-1/4"></div>
              <div class="absolute top-14 h-4 w-0.5 bg-gray-300 left-3/4"></div>
              <div class="absolute top-14 h-4 w-0.5 bg-gray-300 right-0"></div>
              
              <!-- Scale labels -->
              <div class="absolute top-20 left-0 text-xs text-gray-500">-50%</div>
              <div class="absolute top-20 left-1/4 text-xs text-gray-500">-25%</div>
              <div class="absolute top-20 left-1/2 transform -translate-x-1/2 text-xs font-medium text-gray-700">0%</div>
              <div class="absolute top-20 left-3/4 text-xs text-gray-500">+25%</div>
              <div class="absolute top-20 right-0 text-xs text-gray-500">+50%</div>
              
              <!-- National average label -->
              <div class="absolute top-24 left-1/2 transform -translate-x-1/2 text-xs text-center text-gray-600">
                National Avg: 52.7%
              </div>
              
              <!-- The differential bar -->
                <div class="absolute top-14 h-4 bg-orange-500 rounded-l" style="right: 50%; width: 27.83%;"></div>
                <!-- Institution marker and value -->
                <div class="absolute top-6 flex flex-col items-center" style="right: calc(50% + 27.83%);">
                  <span class="text-sm font-semibold text-orange-700">24.9%</span>
                  <div class="h-8 w-0.5 bg-gray-500 mt-1"></div>
                </div>
            </div>
            
            <!-- Summary text -->
            <div class="text-center">
              <p class="text-sm">
                This institution's transfer student success rate is 
                <span class="text-orange-700 font-semibold">
                  -27.8%
                </span>
                lower than the national average
              </p>
            </div>
          </div>
        </div>
    </div>
  </template>
</turbo-stream>
</template></turbo-stream><turbo-stream action="update" target="provider-nav"><template><a class="group px-4 py-2 text-center text-base font-semibold text-[#005850]" data-turbo-frame="provider_detail_tab_slot" data-turbo-stream="true" href="/providers/498/about">
  <span class="relative inline-block">
    About
    <span class="absolute -bottom-2 left-0 h-1 w-full bg-[#005850] transition-all duration-200 ease-in-out
                 opacity-100 scale-x-100">
    </span>
  </span>
</a>
<a class="group px-4 py-2 text-center text-base font-semibold text-[#005850]" data-turbo-frame="provider_detail_tab_slot" data-turbo-stream="true" href="/providers/498/admission">
  <span class="relative inline-block">
    Admission & Cost
    <span class="absolute -bottom-2 left-0 h-1 w-full bg-[#005850] transition-all duration-200 ease-in-out
                 opacity-0 scale-x-0 group-hover:scale-x-100">
    </span>
  </span>
</a>
<a class="group px-4 py-2 text-center text-base font-semibold text-[#005850]" data-turbo-frame="provider_detail_tab_slot" data-turbo-stream="true" href="/providers/498/programs">
  <span class="relative inline-block">
    Programs
    <span class="absolute -bottom-2 left-0 h-1 w-full bg-[#005850] transition-all duration-200 ease-in-out
                 opacity-0 scale-x-0 group-hover:scale-x-100">
    </span>
  </span>
</a></template></turbo-stream>