<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">
          
  Northwest Vista College, located in San Antonio, Texas, offers a supportive and academically rich environment. Established to serve the growing community, the college provides diverse programs and flexible scheduling options catering to various learners, including adult students. Northwest Vista is known for its commitment to academic excellence and vibrant campus life, achieving recognition through multiple awards. The college offers notable programs in fields designed to prepare students for successful careers and further academic pursuits. Experience a college focused on student success and community impact.


        </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: 12,964
              </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 27.55%, #e5e7eb 27.55% 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">27.55%</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.74%;"></div>
                <!-- Institution marker and value -->
                <div class="absolute top-6 flex flex-col items-center" style="right: calc(50% + 27.74%);">
                  <span class="text-sm font-semibold text-orange-700">25.0%</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.7%
                </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/1526/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/1526/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/1526/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>