<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-default"}
    phx-click={DesignSystem.show_modal("modal-single-default")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-default"
    title="My Title"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-default"}]]}}
    action_title="My close modal"
  >
    <div data-test-id="modal-content">Content goes here</div>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-with-description"}
    phx-click={DesignSystem.show_modal("modal-single-with-description")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-with-description"
    title="My Title"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-with-description"}]]}}
    action_title="My close modal"
  >
    <:description>Description goes <b>here</b></:description>
    <div data-test-id="modal-content">Content goes here</div>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-destructive"}
    phx-click={DesignSystem.show_modal("modal-single-destructive")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-destructive"
    title="Are you sure?"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-destructive"}]]}}
    destructive
    action_title="My close modal"
  >
    <div data-test-id="modal-content">Content goes here</div>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-with-disable-action"}
    phx-click={DesignSystem.show_modal("modal-single-with-disable-action")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-with-disable-action"
    title="My Title"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-with-description-and-custom-actions"}]]}}
    action_title="My close modal"
    action_disabled
  >
    <div data-test-id="modal-content">Content goes here</div>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-with-description-and-custom-actions"}
    phx-click={DesignSystem.show_modal("modal-single-with-description-and-custom-actions")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-with-description-and-custom-actions"
    title="My Title"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-with-description-and-custom-actions"}]]}}
    action_title="My close modal"
  >
    <:description>Description goes <b>here</b></:description>
    <div data-test-id="modal-content">Content goes here</div>
    <:actions><.button>Custom action</.button></:actions>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-with-custom-actions-and-without-cancel"}
    phx-click={DesignSystem.show_modal("modal-single-with-custom-actions-and-without-cancel")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-with-custom-actions-and-without-cancel"
    title="My Title"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-with-custom-actions-and-without-cancel"}]]}}
    hide_cancel
    action_title="My close modal"
  >
    <div data-test-id="modal-content">Content goes here</div>
    <:actions><.button>Custom action</.button></:actions>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-long-title"}
    phx-click={DesignSystem.show_modal("modal-single-long-title")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-long-title"
    title="Very long title with a lot to say and even more"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-default"}]]}}
    action_title="My close modal"
  >
    <div data-test-id="modal-content">Content goes here</div>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-form"}
    phx-click={DesignSystem.show_modal("modal-single-form")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-form"
    title="Please provide information to continue"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-form"}]]}}
    action_title="Save"
  >
    <:description>Description goes here</:description>
    <.simple_form for={%{id: "example"}} actions_layout="cluster" data-test-id="modal-content">
      <.input name="Name" value="" label="Name" />
      <.input name="Email" value="" label="Email" />
    </.simple_form>
  </.modal>
</div>

<div data-test-id="modal-variation-container">
  <.button
    id={"button-modal-single-file-upload"}
    phx-click={DesignSystem.show_modal("modal-single-file-upload")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-file-upload"
    title="Upload file"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-file-upload"}]]}}
    action_title="Confirm"
  >
    <.live_upload_zone id="upload-zone-single-image-upload" type={:image} upload_callback={&Storybook.Modal.Modal.upload_callback/1} />
    <div data-test-id="modal-content">Content goes here</div>
  </.modal>
</div>