<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-with-dropdown"}
    phx-click={DesignSystem.show_modal("modal-single-with-dropdown")}
  >
    Open modal
  </.button>

  <.modal
    id="modal-single-with-dropdown"
    title="Edit trip details"
    on_action={%JS{ops: [["exec", %{attr: "data-cancel", to: "#modal-single-with-dropdown"}]]}}
    action_title="Save"
  >
    <.simple_form for={%{id: "trip"}} actions_layout="cluster" data-test-id="modal-content">
      <.input
        id="modal-dropdown-country"
        type="dropdown"
        name="trip[country]"
        label="Country"
        placeholder="Select..."
        value={nil}
        options={[
          %{label: "Argentina", value: "argentina"},
          %{label: "Brazil", value: "brazil"},
          %{label: "Canada", value: "canada"},
          %{label: "Denmark", value: "denmark"},
          %{label: "Ecuador", value: "ecuador"},
          %{label: "France", value: "france"},
          %{label: "Germany", value: "germany"},
          %{label: "Hungary", value: "hungary"},
          %{label: "India", value: "india"},
          %{label: "Japan", value: "japan"}
        ]}
      />
      <.input name="trip[name]" value="" label="Trip name" />
      <.input name="trip[email]" value="" label="Contact email" />
      <.input name="trip[phone]" value="" label="Phone" />
      <.input name="trip[street]" value="" label="Street" />
      <.input name="trip[city]" value="" label="City" />
      <.input name="trip[zip]" value="" label="Zip" />
      <.input
        id="modal-dropdown-language"
        type="dropdown"
        name="trip[language]"
        label="Language"
        placeholder="Select..."
        value={nil}
        options={[
          %{label: "English", value: "english"},
          %{label: "French", value: "french"},
          %{label: "German", value: "german"},
          %{label: "Japanese", value: "japanese"},
          %{label: "Portuguese", value: "portuguese"},
          %{label: "Spanish", value: "spanish"}
        ]}
      />
    </.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>