@import helper._
@import com.gu.pandomainauth.model.User
@(user: User)(implicit request: RequestHeader)

@main(user, "Choose a file to upload for public access") {
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
            <h1>Choose files to upload for public access</h1>
            <div class="upload-error upload-error--hidden" id="png-error">
                <p> The Grid now accepts PNGs, give it a try!</p>
            </div>

            @helper.form(action = routes.Application.uploadFile, Symbol("enctype") -> "multipart/form-data") {
                @CSRF.formField

                <input id="fileChooser" type="file" name="files" multiple required hidden>

                <button type="button" class="file-choose-button mdl-button mdl-js-button"
                        onclick="document.getElementById('fileChooser').click()">
                    <i class="material-icons">search</i>Browse
                </button>

                <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">
                    Upload
                </button>

                <div id="selectedFiles">
                    Selected Files:
                    <ul>

                    </ul>

                </div>
            }

        </div>

    </div>
    <script src="@routes.Assets.versioned("js/upload.js")"></script>

}