@use super::{layout_html, statics::{form_css, form_js}};

@(endpoint: &str, name: &str)

@:layout_html("Upload Images", None, {
<link rel="stylesheet" href="@crate::statics(form_css.name)" type="text/css" />
<script src="@crate::statics(form_js.name)" type="text/javascript"></script>
}, {
<section>
  <form method="post" action="@endpoint" enctype="multipart/form-data">
    <article>
      <div class="legend">
        <h3>
          <legend>Upload Images</legend>
        </h3>
      </div>
    </article>
    <article>
      <label for="@name">Chose up to ten images to upload (PNG, JPG, GIF, WEBP, MP4)</label>
      <div class="file-upload">
        <div class="button plain">
          <span id="file-upload-text">Select Files</span>
          <input id="file-upload-input" type="file" name="@name"
            accept="image/apng,image/avif,image/png,image/gif,image/jpeg,image/jxl,image/webp,video/mp4,video/quicktime,video/webm,.apng,.avif,.jpg,.jpeg,.jxl,.png,.gif,.webp,.m4v,.mov,.mp4,.webm"
            multiple />
        </div>
      </div>
    </article>
    <article>
      <div class="button submit">
        <span>Upload</span>
        <button>Upload</button>
      </div>
    </article>
  </form>
</section>
})