<.calendar id="calendar-single-normal">
  <:activity
    description="To Airport"
    supplier_name="ABC Travels"
    start_time={~T[08:30:00]}
    end_time={~T[08:45:00]}
    status="Booked"
    status_chip_type="success"
  />
  <:activity
    description="Flight to NYC"
    supplier_name="Delta Airlines"
    start_time={~T[09:30:00]}
    end_time={~T[10:00:00]}
    status="Booked"
    status_chip_type="success"
  />
  <:activity
    description="To Hotel"
    supplier_name="XYZ Travels"
    start_time={~T[10:45:00]}
    end_time={~T[11:20:00]}
    status="Pending"
    status_chip_type="neutral"
  />
  <:activity
    description="Tour"
    supplier_name="XYZ Travels"
    start_time={~T[11:45:00]}
    end_time={~T[12:45:00]}
    status="Pending"
    status_chip_type="neutral"
  />
  <:activity
    description="To Hotel"
    supplier_name="XYZ Travels"
    start_time={~T[12:45:00]}
    end_time={~T[13:00:00]}
    status="Pending"
    status_chip_type="neutral"
  />
  <:activity
    description="Break"
    supplier_name="Hotel"
    start_time={~T[13:00:00]}
    end_time={~T[13:10:00]}
    status="Pending"
    status_chip_type="neutral"
  />
  <:activity
    description="Flight"
    supplier_name="Delta Airlines"
    start_time={~T[13:30:00]}
    end_time={~T[15:00:00]}
    status="Booked"
    status_chip_type="success"
  />
  <:activity
    description="To Hotel (with some very very very large name here)"
    supplier_name="XYZ Travels"
    start_time={~T[15:00:00]}
    end_time={~T[15:20:00]}
    status="Pending"
    status_chip_type="neutral"
  />
</.calendar>

<.calendar id="calendar-single-activity-with-link">
  <:activity
    description="To Airport"
    supplier_name="ABC Travels"
    start_time={~T[08:30:00]}
    end_time={~T[08:45:00]}
    status="Booked"
    status_chip_type="success"
    on_click={JS.navigate("#")}
  />
</.calendar>

<.calendar id="calendar-single-with-no-activity"/>

<.calendar id="calendar-single-activity-with-href">
  <:activity
    description="To Airport"
    supplier_name="ABC Travels"
    start_time={~T[08:30:00]}
    end_time={~T[08:45:00]}
    status="Booked"
    status_chip_type="success"
    href="/welcome"
  />
  <:activity
    description="Flight to NYC"
    supplier_name="Delta Airlines"
    start_time={~T[09:30:00]}
    end_time={~T[10:00:00]}
    status="Booked"
    status_chip_type="success"
    href="/welcome"
    on_click={JS.navigate("/welcome")}
  />
</.calendar>

<.calendar id="calendar-single-with-different-start-hour" start_hour={10}/>

<.calendar id="calendar-single-back-to-back-meetings" start_hour={9}>
  <:activity
    description="Morning Meeting"
    supplier_name="Conference Room A"
    start_time={~T[09:00:00]}
    end_time={~T[10:00:00]}
    status="Booked"
    status_chip_type="success"
  />
  <:activity
    description="Team Standup"
    supplier_name="Conference Room B"
    start_time={~T[10:00:00]}
    end_time={~T[11:00:00]}
    status="Booked"
    status_chip_type="success"
  />
  <:activity
    description="Project Review"
    supplier_name="Conference Room A"
    start_time={~T[11:00:00]}
    end_time={~T[12:00:00]}
    status="Booked"
    status_chip_type="success"
  />
</.calendar>