<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">
          
  Kansas State University, located in Manhattan, Kansas, provides a comprehensive educational experience. Founded in 1863, the university fosters academic excellence across diverse fields of study. A vibrant campus life complements rigorous coursework. Nationally recognized programs and award-winning faculty support student success. Flexible scheduling options serve diverse learners, including adult students. Research contributions and community engagement demonstrate significant impact. Kansas State University prepares students for leadership and innovation in a global society.


        </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 86.616deg, #3eb2a6 86.616deg 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: 24.06%
                    </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, 52.951380505980964% 0.08718247675336954%, 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: 75.94%
                    </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: 24.1%</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: 75.9%</span>
              </div>
              <div class="text-sm text-gray-600 mt-2">
                Total Enrollment: 19,438
              </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 64.22%, #e5e7eb 64.22% 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">64.22%</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-[#3eb2a6] rounded-r" style="left: 50%; width: 6.340000000000004%;"></div>
                <!-- Institution marker and value -->
                <div class="absolute top-6 flex flex-col items-center" style="left: calc(50% + 6.340000000000004%);">
                  <span class="text-sm font-semibold text-[#3eb2a6]">59.1%</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-[#3eb2a6] font-semibold">
                  +6.3%
                </span>
                higher 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/978/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/978/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/978/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>