<form style="display:none;"id="passage_form"class="passage_form"action="/create_initial_passage/" type="post"enctype="multipart/form-data">
    <input id="passage_title"class="passage_title" value="" type="text"name="title"placeholder="Title (Optional)">

        <div class="rich_input input-field">
            <div class="passage_description" id="passage_content" cols="30" rows="10" placeholder="Content"></div>
            <input id="quill-data"value=""name="content"type="hidden">
        </div>
        <div class="mixed_input input-field hide2">
            <textarea style="display:none;"class="passage_html" name="html" id="passage_html" cols="30" rows="10" placeholder="HTML"></textarea>
            <textarea style="display:none;"class="passage_css" name="css" id="passage_css" cols="30" rows="10" placeholder="CSS"></textarea>
            <textarea style="display:none;"class="passage_js" name="js" id="passage_js" cols="30" rows="10" placeholder="Javascript"></textarea>
            <code-input template="code-input"lang="HTML"class="code_display display_html" id="display_html" placeholder="HTML"value=""></code-input>
            <code-input template="code-input"lang="CSS"class="code_display display_css" id="display_css" placeholder="CSS"value=""></code-input>
            <code-input template="code-input"lang="javascript"class="code_display display_js" id="display_js" placeholder="Javascript"value=""></code-input>
        </div>
        <div class="d-code-input input-field hide2">
            <div class="ace-editor"style=""id="editor"></div>
            <script>
                var editor = ace.edit("editor");
                editor.setTheme("ace/theme/monokai");
                // change this based on lang input
                editor.session.setMode("ace/mode/javascript");
                editor.getSession().on("change", function () {
                    $("textarea[id=\"passage_code\"]").val(editor.getSession().getValue());
                });
                editor.setOptions({
                fontSize: "10pt"
                });
            </script>
            <textarea style="display:none;"class="passage_code" name="code" id="passage_code" cols="30" rows="10" autocomplete="off"></textarea>
        </div>
    <!-- Upload Directory -->
    <%/*%>
    <input id="passage_file"class="passage_file" name="file" type="file" autocomplete="off" webkitdirectory mozdirectory msdirectory odirectory directory />
    <%*/%>
    <input id="passage_file"class="passage_file" name="file" type="file" autocomplete="off" multiple/>
    <div style="display:none;"id="passage_thumbnail">
        <img id="thumbnail_image"src="" alt="">
        <input id="thumbnail_clip"type="hidden" name="thumbnail">
    </div>
    <div id="passage_advanced"class="passage_advanced">
            <br>
            <div>Programming Language:</div><br>
            <input autocomplete="off" id="passage_ext"class="passage_ext passage_lang" value="rich" type="text"name="lang"placeholder="Programming Language">
            <script>
                $(function(){
                    $(document).on("keyup", "#passage_ext", function(){
                        switch($(this).val()){
                            case "rich":
                                $(".input-field").hide();
                                $(".rich_input").show();
                            break;
                            case "mixed":
                                $(".input-field").hide();
                                $(".mixed_input").show();
                            break;
                            default:
                            $(".input-field").hide();
                            $(".d-code-input").show();
                            editor.session.setMode("ace/mode/" + $(this).val());
                        }
                    });
                });
            </script>
            <div style="margin-top: 25px;">File Path:</div><br>
            <input autocomplete="off"id="passage_filestreampath"class="passage_ext" value="" type="text"name="filestreampath"placeholder="">
            <%if(user && user.admin){%>
                <!-- add radio buttons for making mainfile -->
                <button id="make_mainfile">Make Mainfile (obsolete)</button>
            <%}%>
            <div style="margin-top: 25px;">Bibliography:</div><br>
            <input id="passage_bibliography"class="passage_ext" value="" type="text"name="bibliography"placeholder="Additional Source Info">
            <!-- <div style="margin-top: 25px;">Inputs:</div><br>
            <input type="text"placeholder="input1" class="passage_input"><br>
            <button class="passage_button">More Inputs</button><br><br> -->
            <!-- <div style="margin-top: 25px;">Output:</div><br>
            <textarea class="passage-textarea"placeholder="Output"name="" id="" cols="30" rows="10"></textarea> -->
            <textarea style="display:none;"class="passage_license" name="license" id="passage_license" cols="30" rows="10" placeholder="LICENSE"></textarea>
            <input class="editor-chief"type="hidden" value="<%=passage._id || 'root'%>"name="chief">
            <input id="post-pg"type="hidden" value="<%=page%>"name="page">
            <input id="forum-which"type="hidden" value=""name="which">
            <input id="which-page"type="hidden" value="<%=whichPage%>"name="whichPage">
            <input id="which-subforums"type="hidden" value="false"name="subforums">
    </div>
    <ul class="passage_tabs"style="margin-top:20px;text-align:left;">
        <li id="passage_executable"class="passage_tab passage_tab_open_advanced open_advanced view_code">Advanced</li>
    </ul>
    <button id="post-passage"style="margin:auto;text-align:center;font-size:1.3em;">Post</button>
</form>