<.line_item_card
  id="line-item-card-single-grey-surface"
  description="Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays."
  title="Queen room with balcony (single)"
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-grey-surface")}
  surface="grey"
>
  <.input
    type="text"
    name="quantity"
    value=""
    label="Quantity"
    show_error_messages={false}
    required={true}
  />
  <.input
    type="money"
    name="price_per_unit"
    value=""
    label="Price per unit"
    show_error_messages={false}
    required={true}
  />
</.line_item_card>

<.line_item_card
  id="line-item-card-single-grey-surface-with-error"
  description="Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays."
  title="Queen room with balcony (single)"
  errors={["Enter a quantity and a price."]}
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-grey-surface-with-error")}
  surface="grey"
>
  <.input
    type="text"
    name="quantity"
    value=""
    label="Quantity"
    show_error_messages={false}
    errors={["Quantity is required"]}
    required={true}
  />
  <.input
    type="money"
    name="price_per_unit"
    value=""
    label="Price per unit"
    show_error_messages={false}
    errors={["Price per unit is required"]}
    required={true}
  />
</.line_item_card>

<.line_item_card
  id="line-item-card-single-white-surface"
  description="Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays."
  title="Queen room with balcony (single)"
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-white-surface")}
  surface="white"
>
  <.input
    type="text"
    name="quantity"
    value=""
    label="Quantity"
    show_error_messages={false}
    required={true}
  />
  <.input
    type="money"
    name="price_per_unit"
    value=""
    label="Price per unit"
    show_error_messages={false}
    required={true}
  />
</.line_item_card>

<.line_item_card
  id="line-item-card-single-white-surface-with-error"
  description="Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays."
  title="Queen room with balcony (single)"
  errors={["Enter a quantity and a price."]}
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-white-surface-with-error")}
  surface="white"
>
  <.input
    type="text"
    name="quantity"
    value=""
    label="Quantity"
    show_error_messages={false}
    errors={["Quantity is required"]}
    required={true}
  />
  <.input
    type="money"
    name="price_per_unit"
    value=""
    label="Price per unit"
    show_error_messages={false}
    errors={["Price per unit is required"]}
    required={true}
  />
</.line_item_card>