<.live_upload_zone
  id="upload-zone-single-image-upload"
  size="base"
  type={:image}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :image_upload, reset: true})}>Reset image</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-image-upload")
--%>

<.live_upload_zone
  id="upload-zone-single-image-upload-with-errors"
  size="base"
  type={:image}
  errors={["My error 1", "My error 2"]}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :image_upload_with_errors, reset: true, errors: []})}>Reset image and errors</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-image-upload-with-errors")
--%>

<.live_upload_zone
  id="upload-zone-single-existing-image"
  size="base"
  type={:image}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
  src="/images/demo.jpeg"
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :existing_image, reset: true})}>Reset image</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-existing-image")
--%>

<.live_upload_zone
  id="upload-zone-single-document-upload"
  size="base"
  type={:document}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :document_upload, reset: true})}>Reset document</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-document-upload")
--%>

<.live_upload_zone
  id="upload-zone-single-document-upload-with-small-upload-zone"
  size="sm"
  type={:document}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :document_upload, reset: true})}>Reset document</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-document-upload-with-small-upload-zone")
--%>

<.live_upload_zone
  id="upload-zone-single-document-upload-with-label"
  label="Documents"
  size="base"
  type={:document}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :document_upload_with_label, reset: true})}>Reset document</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-document-upload-with-label")
--%>

<.live_upload_zone
  id="upload-zone-single-document-upload-with-accepted-types"
  size="base"
  type={:document}
  accepted_file_extensions={[".csv"]}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :document_upload_with_accepted_types, reset: true})}>Reset document</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-document-upload-with-accepted-types")
--%>

<.live_upload_zone
  id="upload-zone-single-document-upload-with-errors"
  size="base"
  type={:document}
  errors={["Your file should not exceed 50MB."]}
  upload_callback={&Storybook.Form.UploadZone.upload_callback/1}
/>

<.button phx-click={JS.push("psb-assign", value: %{variation_id: :document_upload_with_errors, reset: true})}>Reset document</.button>

<%!--
To reset the upload zone use the `reset_upload_zone` helper:

    reset_upload_zone("upload-zone-single-document-upload-with-errors")
--%>