<.line_item_card
  id="line-item-card-single-grey-surface"
  title="Double double"
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-grey-surface")}
  surface="grey"
>
  <.input
    type="number"
    name="nights"
    value="4"
    label="Nights"
    show_error_messages={false}
    required={true}
  />
  <.input
    type="number"
    name="rooms"
    value="4"
    label="Rooms"
    show_error_messages={false}
    required={true}
  />
  <.input
    type="money"
    name="rate"
    value="200"
    label="Rate"
    show_error_messages={false}
    required={true}
  />
  <.line_item_card_subtotal>$3,200.00</.line_item_card_subtotal>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-grey-surface-with-error"
  title="Double double"
  errors={["Nights, rooms and rate can’t be blank"]}
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-grey-surface-with-error")}
  surface="grey"
>
  <.input
    type="number"
    name="nights"
    value=""
    label="Nights"
    show_error_messages={false}
    errors={["Nights is required"]}
    required={true}
  />
  <.input
    type="number"
    name="rooms"
    value=""
    label="Rooms"
    show_error_messages={false}
    errors={["Rooms is required"]}
    required={true}
  />
  <.input
    type="money"
    name="rate"
    value=""
    label="Rate"
    show_error_messages={false}
    errors={["Rate is required"]}
    required={true}
  />
  <.line_item_card_subtotal errors={["Nights, rooms and rate can’t be blank"]}>
    $0.00
  </.line_item_card_subtotal>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-grey-surface-with-stacked-content"
  title="General admission"
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-grey-surface-with-stacked-content")}
  surface="grey"
  content_layout="stacked"
>
  <.line_item_card_row>
    <.input
      type="text"
      name="adult_quantity"
      value="4"
      label="Adult"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="adult_rate"
      value="30"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$120.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row>
    <.input
      type="text"
      name="student_quantity"
      value="40"
      label="Student"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="student_rate"
      value="20"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$800.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row>
    <.input
      type="text"
      name="child_quantity"
      value="4"
      label="Child"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="child_rate"
      value="10"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$40.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row>
    <.input
      type="text"
      name="senior_quantity"
      value="0"
      label="Senior"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="senior_rate"
      value="0"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-grey-surface-with-stacked-content-error"
  title="General admission"
  errors={["Category and rate can’t be blank"]}
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-grey-surface-with-stacked-content-error")}
  surface="grey"
  content_layout="stacked"
>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="adult_quantity"
      value=""
      label="Adult"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="adult_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="student_quantity"
      value=""
      label="Student"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="student_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="child_quantity"
      value=""
      label="Child"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="child_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="senior_quantity"
      value=""
      label="Senior"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="senior_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-white-surface"
  title="Double double"
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-white-surface")}
  surface="white"
>
  <.input
    type="number"
    name="nights"
    value="4"
    label="Nights"
    show_error_messages={false}
    required={true}
  />
  <.input
    type="number"
    name="rooms"
    value="4"
    label="Rooms"
    show_error_messages={false}
    required={true}
  />
  <.input
    type="money"
    name="rate"
    value="200"
    label="Rate"
    show_error_messages={false}
    required={true}
  />
  <.line_item_card_subtotal>$3,200.00</.line_item_card_subtotal>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-white-surface-with-error"
  title="Double double"
  errors={["Nights, rooms and rate can’t be blank"]}
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-white-surface-with-error")}
  surface="white"
>
  <.input
    type="number"
    name="nights"
    value=""
    label="Nights"
    show_error_messages={false}
    errors={["Nights is required"]}
    required={true}
  />
  <.input
    type="number"
    name="rooms"
    value=""
    label="Rooms"
    show_error_messages={false}
    errors={["Rooms is required"]}
    required={true}
  />
  <.input
    type="money"
    name="rate"
    value=""
    label="Rate"
    show_error_messages={false}
    errors={["Rate is required"]}
    required={true}
  />
  <.line_item_card_subtotal errors={["Nights, rooms and rate can’t be blank"]}>
    $0.00
  </.line_item_card_subtotal>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-white-surface-with-stacked-content"
  title="General admission"
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-white-surface-with-stacked-content")}
  surface="white"
  content_layout="stacked"
>
  <.line_item_card_row>
    <.input
      type="text"
      name="adult_quantity"
      value="4"
      label="Adult"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="adult_rate"
      value="30"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$120.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row>
    <.input
      type="text"
      name="student_quantity"
      value="40"
      label="Student"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="student_rate"
      value="20"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$800.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row>
    <.input
      type="text"
      name="child_quantity"
      value="4"
      label="Child"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="child_rate"
      value="10"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$40.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row>
    <.input
      type="text"
      name="senior_quantity"
      value="0"
      label="Senior"
      show_error_messages={false}
      required={true}
    />
    <.input
      type="money"
      name="senior_rate"
      value="0"
      label="Rate"
      show_error_messages={false}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
</.line_item_card>

<.line_item_card
  id="line-item-card-single-white-surface-with-stacked-content-error"
  title="General admission"
  errors={["Category and rate can’t be blank"]}
  on_close={JS.set_attribute({"style", "display: none"}, to: "#line-item-card-single-white-surface-with-stacked-content-error")}
  surface="white"
  content_layout="stacked"
>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="adult_quantity"
      value=""
      label="Adult"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="adult_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="student_quantity"
      value=""
      label="Student"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="student_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="child_quantity"
      value=""
      label="Child"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="child_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
  <.line_item_card_row errors={["Category and rate can’t be blank"]}>
    <.input
      type="text"
      name="senior_quantity"
      value=""
      label="Senior"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <.input
      type="money"
      name="senior_rate"
      value=""
      label="Rate"
      show_error_messages={false} errors={["can't be blank"]}
      required={true}
    />
    <:subtotal>$0.00</:subtotal>
  </.line_item_card_row>
</.line_item_card>