<div id="date-range-picker-single-basic-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-basic"
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
    />
  </form>
</div>

<div id="date-range-picker-single-with-different-min-and-max-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-different-min-and-max"
      min_date={~D[2026-01-01]}
      max_date={~D[2028-10-31]}
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
    />
  </form>
</div>

<div id="date-range-picker-single-with-more-than-3-years-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-more-than-3-years"
      min_date={~D[2026-01-01]}
      max_date={~D[2029-10-31]}
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
    />
  </form>
</div>

<div id="date-range-picker-single-with-range-in-past-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-range-in-past"
      min_date={~D[2021-01-01]}
      max_date={~D[2023-10-31]}
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
    />
  </form>
</div>

<div id="date-range-picker-single-with-placeholder-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-placeholder"
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
      range_start_placeholder="MM/DD/YYYY"
      range_end_placeholder="MM/DD/YYYY"
    />
  </form>
</div>

<div id="date-range-picker-single-with-required-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-required"
      required
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
      range_start_placeholder="MM/DD/YYYY"
      range_end_placeholder="MM/DD/YYYY"
    />
  </form>
</div>

<div id="date-range-picker-single-with-different-mobile-label-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-different-mobile-label"
      required
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
      range_start_placeholder="MM/DD/YYYY"
      range_start_field_mobile_label="Departure (mm/dd/yy)"
      range_end_placeholder="MM/DD/YYYY"
      range_end_field_mobile_label="Return (mm/dd/yy)"
    />
  </form>
</div>

<div id="date-range-picker-single-with-value-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-value"
      range_start={~D[2026-01-14]}
      range_end={~D[2026-01-20]}
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
      range_start_placeholder="MM/DD/YYYY"
      range_end_placeholder="MM/DD/YYYY"
    />
  </form>
</div>

<div id="date-range-picker-single-with-error-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-error"
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={["Invalid start date"]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={["Invalid end date"]}
      range_start_placeholder="MM/DD/YYYY"
      range_end_placeholder="MM/DD/YYYY"
    />
  </form>
</div>

<div id="date-range-picker-single-with-custom-change-storybook-wrapper" style="width: 100%; height: 600px;">
  <form>
    <.date_range_picker
      id="date-range-picker-single-with-custom-change"
      range_start_field_label="Departure date (mm/dd/yy)"
      range_start_field_name="trip[start_date]"
      range_start_field_errors={[]}
      range_end_field_label="Return date (mm/dd/yy)"
      range_end_field_name="trip[end_date]"
      range_end_field_errors={[]}
      range_start_placeholder="MM/DD/YYYY"
      range_end_placeholder="MM/DD/YYYY"
      start_field_phx_change="custom-start-change"
      end_field_phx_change="custom-end-change"
    />
  </form>
</div>

<.date_range_picker
  id="date-range-picker-single-with-parent-form"
  range_start_field_label="Departure date (mm/dd/yy)"
  range_start_field_name="trip[start_date]"
  range_start_field_errors={[]}
  range_end_field_label="Return date (mm/dd/yy)"
  range_end_field_name="trip[end_date]"
  range_end_field_errors={[]}
/>