<turbo-stream action="replace" target="booking_container"><template>
<div id="booking_container" class="flex-1 h-full flex flex-col gap-5">
  <div id="doctors_content" class="" data-controller="doctors" uk-filter="target: .js-doctor-filter; animation: fade">
    <nav class="mb-8 flex items-center gap-2 text-on-surface-variant/60 font-medium text-xs tracking-wider uppercase uk-animation-fade">
      <span class="hover:text-primary cursor-pointer transition-colors">Clinics</span>
      <span data-feather="chevron-right" class="text-[14px]"></span>
      <span class="text-primary font-bold">Select Doctor</span>
      <span data-feather="chevron-right" class="text-[14px]"></span>
      <span>Time</span>
    </nav>
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
      <aside class="lg:col-span-3 space-y-6 uk-animation-fade">
          <div class="bg-surface-container-low rounded-xl p-6 border border-outline-variant/20">
              <div class="flex flex-col gap-4">
                  <div class="w-full aspect-video rounded-lg overflow-hidden bg-surface-container">
                      <img class="w-full h-full object-cover" alt="CareCal Downtown Clinic clinic image" src="https://demo.careflowclinic.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--cfa516ca26c49991b6174c57c34d639212c43811/carecal-downtown-clinic-ai-image.png" />
                  </div>
                  <div>
                      <span
                          class="text-[10px] font-bold text-primary uppercase tracking-[0.2em] block mb-1">Selected
                          Location</span>
                      <h2 class="text-xl font-extrabold font-headline text-on-surface leading-tight m-0!">
                        CareCal Downtown Clinic
                      </h2>
                  </div>
                  <div class="space-y-3 pt-2">
                      <div class="flex gap-3 items-start">
                          <span data-feather="map-pin" class="text-primary text-lg"></span>
                          <p class="text-sm text-on-surface-variant font-medium m-0!">
                            245 Market Street, Boston, MA 02110
                            <a target="_blank" class="uk-link-heading" href="https://www.google.com/maps/search/245 Market Street, Boston, MA 02110">
                              <span data-feather="external-link" class="text-primary text-lg ml-2 size-4" uk-tooltip="title: View on Google Maps"></span>
</a>                          </p>
                      </div>
                      <div class="flex gap-3 items-start">
                          <span data-feather="phone" class="text-primary text-lg"></span>
                          <p class="text-sm text-on-surface-variant font-medium m-0!">
                            <a class="uk-link-heading" href="tel:6175550145">(617) 555-0145</a>
                          </p>
                      </div>
                  </div>
                  <div class="pt-4 mt-4 border-t border-outline-variant/30">
                      <a data-turbo-stream="true" class="w-full py-3 rounded-lg bg-surface-container-high text-on-surface-variant text-sm font-bold flex items-center justify-center gap-2 hover:bg-surface-container-highest transition-colors border-0! no-underline! hover:text-primary" href="/booking/clinics">
                        <span data-feather="edit-2" class="size-4"></span>
                        Change Clinic
</a>                  </div>
              </div>
          </div>
	          <div class="bg-surface-container-lowest rounded-xl p-6 border border-outline-variant/10 shadow-sm">
	              <h3 class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-4">Quick Filters
	              </h3>
	              <div class="flex flex-wrap gap-2">
	                  <button type="button"
	                      class="uk-active px-3 py-1 bg-surface-container text-on-surface-variant text-[11px] font-bold rounded-full border border-secondary-container/30 cursor-pointer [&.uk-active]:bg-secondary-container/20 [&.uk-active]:text-on-secondary-container"
	                      uk-filter-control>All doctors</button>
	                    <button type="button"
	                      class="px-3 py-1 bg-surface-container text-on-surface-variant text-[11px] font-bold rounded-full hover:bg-surface-container-high cursor-pointer transition-colors border-0 [&.uk-active]:bg-secondary-container/20 [&.uk-active]:text-on-secondary-container"
	                      uk-filter-control="[data-specialty='family-medicine']">Family Medicine</button>
	                    <button type="button"
	                      class="px-3 py-1 bg-surface-container text-on-surface-variant text-[11px] font-bold rounded-full hover:bg-surface-container-high cursor-pointer transition-colors border-0 [&.uk-active]:bg-secondary-container/20 [&.uk-active]:text-on-secondary-container"
	                      uk-filter-control="[data-specialty='internal-medicine']">Internal Medicine</button>
	                    <button type="button"
	                      class="px-3 py-1 bg-surface-container text-on-surface-variant text-[11px] font-bold rounded-full hover:bg-surface-container-high cursor-pointer transition-colors border-0 [&.uk-active]:bg-secondary-container/20 [&.uk-active]:text-on-secondary-container"
	                      uk-filter-control="[data-top-rated='true']">Top Rated</button>
	              </div>
	          </div>
      </aside>
      <section class="lg:col-span-9 uk-animation-slide-top-medium">
        <header class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
          <div>
            <h1 class="text-3xl font-extrabold font-headline tracking-tight text-on-surface mb-2">Available Professionals</h1>
            <p class="text-on-surface-variant font-medium m-0!">Found 2 specialists at this location for your selected date.</p>
          </div>
            <div class="flex items-center gap-3">
                <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Sort by:</span>
                <select
                    class="bg-surface-container-lowest border-outline-variant/30 rounded-lg text-sm font-medium focus:ring-primary focus:border-primary px-4 py-2 pr-10 appearance-none"
                    data-doctors-target="sortSelect"
                    data-action="change->doctors#sort">
                    <option value="rating_desc">Highest Rated</option>
                    <option value="price_asc">Price: Low to High</option>
                    <option value="next_available_asc">Next Available</option>
                </select>
            </div>
        </header>
        <div class="js-doctor-filter grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6" data-doctors-target="doctorGrid">
            <div
              class="group uk-card uk-card-default uk-card-hover shadow-lg rounded-lg doctor-card mt-0!"
              data-doctors-target="doctorCard"
              data-rating="4.8"
              data-min-price="120.0"
              data-next-slot="2026-05-04T10:00:00-04:00"
              data-specialty="internal-medicine"
              data-available-today="false"
              data-top-rated="true"
              data-original-index="0">
              <div class="relative w-full overflow-hidden bg-surface-container">
                <img class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-500" alt="Doctor Avatar" src="https://demo.careflowclinic.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MywicHVyIjoiYmxvYl9pZCJ9fQ==--ad95b116ed771d2752890829397c7abfa61d0f8d/dr-marcus-lee-ai-profile.png" />
                <div class="absolute top-3 right-3 px-2 py-1 bg-white/90 backdrop-blur rounded-md flex items-center gap-1 shadow-sm">
                  <span data-feather="star" class="text-amber-500 size-4"></span>
                  <span class="text-xs font-bold text-on-surface">
                    4.8
                  </span>
                </div>
              </div>
              <div class="p-5 flex-1 flex flex-col">
                <div class="mb-4">
                  <h3 class="text-lg font-bold font-headline text-on-surface mb-1">Dr. Marcus Lee</h3>
                  <div class="flex items-center gap-2">
                    <span class="text-xs font-bold text-primary tracking-wide uppercase">Internal Medicine</span>
                    <span class="w-1 h-1 rounded-full bg-outline-variant"></span>
                    <span class="text-xs font-medium text-on-surface-variant">
                      
                    </span>
                  </div>
                </div>
                <div class="space-y-2 mb-6">
                  <div class="flex justify-between items-center text-sm">
                      <span class="text-on-surface-variant font-medium">Session Price</span>
                      <span class="font-bold text-on-surface">
                          $120 - $225
                      </span>
                  </div>
                  <div class="flex justify-between items-center text-sm">
                      <span class="text-on-surface-variant font-medium">Next Slot</span>
                      <span class="font-bold text-tertiary-container">
                          Tomorrow, 10:00 AM
                      </span>
                  </div>
              </div>
                <span class="text-sm text-gray-500 uk-flex uk-flex-middle gap-2">
                  <span data-feather="video" class="size-4"></span>
                  Offers Online Visits
                </span>
                <div class="mt-5">
                    <a class="uk-button uk-button-secondary w-full" data-turbo-stream="true" href="/booking/appointment/11?clinic_id=2">Select Doctor</a>
                </div>
              </div>
            </div>
            <div
              class="group uk-card uk-card-default uk-card-hover shadow-lg rounded-lg doctor-card mt-0!"
              data-doctors-target="doctorCard"
              data-rating="4.8"
              data-min-price="110.0"
              data-next-slot="2026-05-04T09:00:00-04:00"
              data-specialty="family-medicine"
              data-available-today="false"
              data-top-rated="true"
              data-original-index="1">
              <div class="relative w-full overflow-hidden bg-surface-container">
                <img class="w-full aspect-square object-cover group-hover:scale-105 transition-transform duration-500" alt="Doctor Avatar" src="https://demo.careflowclinic.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MiwicHVyIjoiYmxvYl9pZCJ9fQ==--efc835f9ed4b4f201cc05fee64e990937c4ba8cf/dr-amelia-hart-ai-profile.png" />
                <div class="absolute top-3 right-3 px-2 py-1 bg-white/90 backdrop-blur rounded-md flex items-center gap-1 shadow-sm">
                  <span data-feather="star" class="text-amber-500 size-4"></span>
                  <span class="text-xs font-bold text-on-surface">
                    4.8
                  </span>
                </div>
              </div>
              <div class="p-5 flex-1 flex flex-col">
                <div class="mb-4">
                  <h3 class="text-lg font-bold font-headline text-on-surface mb-1">Dr. Amelia Hart</h3>
                  <div class="flex items-center gap-2">
                    <span class="text-xs font-bold text-primary tracking-wide uppercase">Family Medicine</span>
                    <span class="w-1 h-1 rounded-full bg-outline-variant"></span>
                    <span class="text-xs font-medium text-on-surface-variant">
                      
                    </span>
                  </div>
                </div>
                <div class="space-y-2 mb-6">
                  <div class="flex justify-between items-center text-sm">
                      <span class="text-on-surface-variant font-medium">Session Price</span>
                      <span class="font-bold text-on-surface">
                          $110 - $210
                      </span>
                  </div>
                  <div class="flex justify-between items-center text-sm">
                      <span class="text-on-surface-variant font-medium">Next Slot</span>
                      <span class="font-bold text-tertiary-container">
                          Tomorrow, 9:00 AM
                      </span>
                  </div>
              </div>
                <span class="text-sm text-gray-500 uk-flex uk-flex-middle gap-2">
                  <span data-feather="video" class="size-4"></span>
                  Offers Online Visits
                </span>
                <div class="mt-5">
                    <a class="uk-button uk-button-secondary w-full" data-turbo-stream="true" href="/booking/appointment/10?clinic_id=2">Select Doctor</a>
                </div>
              </div>
            </div>
        </div>
      </section>
    </div>
  </div>
</div>
</template></turbo-stream>