spazio-solazzo/lib/spazio_solazzo_web/live/booking/asset_booking_live.html.heex

<Layouts.app flash={@flash} current_user={@current_user}>
  <section class="mx-auto max-w-[1200px] px-6 py-10">
    <div class="mb-10">
      <.link
        navigate={"/#{@space.slug}"}
        class="inline-flex items-center gap-2 text-sm font-medium text-slate-500 hover:text-sky-500 dark:text-slate-400 dark:hover:text-white transition-colors"
      >
        <.icon name="hero-arrow-left" class="w-5 h-5" /> Back to {@space.name}
      </.link>
    </div>

    <div class="text-center mb-12">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 dark:text-white tracking-tight mb-4">
        {@asset.name}
      </h1>
      <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
        {@space.name} - Flexible booking options available
      </p>
    </div>

    <div class="max-w-4xl mx-auto bg-white dark:bg-slate-800 rounded-3xl p-8 md:p-12 border border-slate-200 dark:border-slate-700 shadow-xl shadow-slate-200/50 dark:shadow-none">
      <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-8">
        Available Time Slots
      </h2>

      <div class="mb-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <.live_component
          module={SpazioSolazzoWeb.CalendarLiveComponent}
          id="booking-calendar"
          selected_date={@selected_date}
        />

        <div class="time-slots-wrapper">
          <p class="mb-4 text-slate-500 dark:text-slate-400">
            Selected day:
            <span class="font-bold text-slate-900 dark:text-white">
              {SpazioSolazzo.CalendarExt.format_date(@selected_date)}
            </span>
          </p>

          <div class="max-h-80 overflow-y-auto pr-4 space-y-3">
            <%= if @time_slots == [] do %>
              <div class="text-center py-8 text-slate-500 dark:text-slate-400">
                No time slots available for this date
              </div>
            <% else %>
              <%= for time_slot <- @time_slots do %>
                <% booked = slot_booked?(time_slot.id, @bookings) %>
                <.time_slot booked={booked} time_slot={time_slot} />
              <% end %>
            <% end %>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-slate-200 dark:border-slate-700 text-center">
        <p class="text-base font-medium text-sky-500 dark:text-sky-400 flex items-center justify-center gap-2">
          <.icon name="hero-credit-card" class="w-5 h-5" /> Payment due upon arrival.
        </p>
      </div>
    </div>
  </section>

  <.live_component
    module={SpazioSolazzoWeb.BookingFormLiveComponent}
    id="booking-modal"
    show={@show_booking_modal}
    selected_time_slot={@selected_time_slot}
    asset={@asset}
    selected_date={@selected_date}
    current_user={@current_user}
    on_cancel={JS.push("cancel_booking")}
  />

  <.booking_confirmation_modal
    id="success-modal"
    show={@show_success_modal}
    on_close={JS.push("close_success_modal")}
  />
</Layouts.app>