<div id="menu-container" th:fragment="menu">
    <div class="menu-spacer"></div>
    <div id="upload-container">
        <form method="POST" action="#" th:action="@{/files/upload}" enctype="multipart/form-data">
            <!-- JavaScript required unfortunately -->
            <input id="upload-container-file-input" type="file" name="files" onchange="this.form.submit()"
                   style="display: none;" multiple>
            <span id="upload-container-span-input" class="icon files-menu-icon"
                  onclick="document.getElementById('upload-container-file-input').click();">&#xe9fc;</span>
        </form>
    </div>
    <div class="menu-spacer"></div>
    <div id="create-dir-container">
        <details>
            <summary>
                <span id="create-dir-container-span-input" class="icon files-menu-icon">&#xe2cc;</span>
                <div class="create-dir-container-details-modal-overlay"></div>
            </summary>
            <div class="create-dir-container-details-modal">
                <div class="create-dir-container-details-modal-content">
                    <form method="POST" action="#" th:action="@{/files/createDir}" enctype="multipart/form-data">
                        <input id="create-dir-container-dir-name" type="text" name="dirName" />
                        <input type="submit" value="Create"/>
                    </form>
                </div>
            </div>
        </details>
    </div>
    <div class="menu-spacer"></div>
    <div>
        <a th:href="@{/files/gallery}">
            <span class="icon files-menu-icon">&#xe3b6;</span>
        </a>
    </div>
</div>