<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="Alexandria Self Guided Skills Station clinic image" src="/assets/clinic-profile-e479fa48.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!">
                        Alexandria Self Guided Skills Station
                      </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!">
                            2800 Eisenhower Ave Suite 220, Alexandria VA 22314
                            <a target="_blank" class="uk-link-heading" href="https://www.google.com/maps/search/2800 Eisenhower Ave Suite 220, Alexandria VA 22314">
                              <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:7039377286">(703) 937-7286</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>
	              </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 0 specialists at this location for your selected date.</p>
          </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="col-span-1 md:col-span-2 xl:col-span-3">
              <div class="p-5 flex-1 flex flex-col items-center justify-center">
                <img class="w-1/2 h-1/2 object-cover opacity-50" alt="No doctors found" src="/assets/no-data-d77d039f.svg" />
              </div>
            </div>
        </div>
      </section>
    </div>
  </div>
</div>
</template></turbo-stream>