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

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

@:layout_html({
    <title>Upload images</title>
    <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)</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/png,image/gif,image/jpeg,image/webp,.jpg,.jpeg,.png,.gif,.webp"
                            multiple
                        />
                    </div>
                </div>
            </article>
            <article>
                <div class="button submit">
                    <span>Upload</span>
                    <button>Upload</button>
                </div>
            </form>
        </article>
    </section>
})