<%if(subPassages && sub === false){%>
    <ul class="page-count">
        <%if(!passage.public && !passage.forum){%>
        
        <%}else{%>
            <%for(var i = 1; i < totalPages + 1; i += 1){%>
                <%if(totalPages > 1){%>
                    <%if(!thread){%>
                        <a style="color:inherit;text-decoration:none;"href="/passage/<%=passage.title%>/<%=passage._id%>/<%=i%>"><li><%=i%></li></a>
                    <%}else{%>
                        <a style="color:inherit;text-decoration:none;"href="#thread/<%=passage.title%>/<%=passage._id%>/<%=i%>"><li><%=i%></li></a>
                    <%}%>
                <%}%>
            <%}%>
        <%}%>
    </ul>
<%}%>
<%if(sub == false && passage.subforums != null && passage.subforums.length > 0){%>
    <%if(typeof subforums == 'undefined'){%>
        <div id="subforums-list">
            <a href="/subforums/<%=passage.title == '' ? 'Untitled' : passage.title%>/<%=passage._id%>">View Subforums</a>
        </div>
    <%}else{%>
        <div id="subforums-list">
            <a href="/passage/<%=passage.title == '' ? 'Untitled' : passage.title%>/<%=passage._id%>">View Sub Passages</a>
        </div>
    <%}%>
<%}%>
<div data-sub="<%=sub%>"id="passage<%=typeof altIteration == 'undefined' ? '' : altIteration%>_<%=passage._id%>" class="passage passage_<%=passage.public ? 'public' : 'private'%> <%=passage.forum ? 'passage_forum' : ''%>">
    <%if(passage.mirror != null){%>
        <input id="p_mirror_<%=passage._id%>"type="hidden"value="<%=passage.mirror._id%>" name="">
    <%}%>
    <%if(passage.bestOf != null){%>
        <input id="p_bestOf_<%=passage._id%>"type="hidden"value="<%=passage.bestOf._id%>" name="">
    <%}%>
    <div id="passage_settings_modal_<%=passage._id%>" class="modal">
        <%- include('passage_settings', {passage: passage}) %>
    </div>
    <div id="passage_sources_modal_<%=passage._id%>" class="modal">
        <%if(passage.sourceLink != null && passage.sourceLink.length > 1){%>
            <div class="passage_source_<%=passage._id%>"><a target="_blank"href="<%=passage.sourceLink%>">External Source</a></div>
        <%}%>
        <%if((!passage.sourceList || passage.sourceList.length < 1) && (passage.sourceLink == null || passage.sourceLink.length < 1)){%>
            <div>No Sources</div>
            <div id="sourcelist_<%=passage._id%>"></div>
        <%}else{%>
        Sources:
        <div id="sourcelist_<%=passage._id%>">
            <%passage.sourceList.forEach(function(source) { %>
                <div class="passage_source_<%=passage._id%>"><a target="_blank"href="/passage/<%=source.title%>/<%=source._id%>"><%=source.title%></a></div>
            <%});%>
        </div>
        <%}%>
        <br>
        Used In:
        <%if(passage.usedIn.length == 0){ %>
            No Passages
        <%}%>
        <%passage.usedIn.forEach(function(passage) { %>
            <%-passage%>,
        <%});%>
        <!-- List collaborators and allow them to be added (permanent) -->

        <!-- Show Additional Source info -->
        <%if(passage.bibliography != null){%>
            <p><%=passage.bibliography%></p>
        <%}%>
    </div>
    <ul class="passage_options">
        <% if(sub === true && (passage.author && user && user._id.toString() == passage.author._id.toString() || passage.passages.length > 0 || passage.public || passage.parent == null)){%>
        <li id="passage_more_<%=passage._id%>" class="passage_option">Details</li>
        <%}%>
        <%if(user){%>
            <li id="passage_expand_<%=passage._id%>" class="passage_option passage_option_expand">Options</li>
            <span id="passage_condensed_<%=passage._id%>"class="condensed">
                <!-- Show them settings only if they made the passage -->
                <%if(passage.author != null && passage.author){%>
                    <%if(passage.author && user && passage.author._id == user._id){%>
                        <a class="basic_link" href="#passage_settings_modal_<%=passage._id%>" rel="modal:open"><li id="passage_settings_<%=passage.id%>" class="passage_option">Settings</li></a>
                        <%}%>
                <%}%>
                <a class="basic_link" href="#passage_sources_modal_<%=passage._id%>" rel="modal:open"><li id="passage_sources_<%=passage.id%>" class="passage_option">Sources</li></a>
                <!-- Shift passage location -->
                <!-- <li id="passage_download_<%=passage.id%>" class="passage_option">Download</li> -->
                <%if(user){%>
                <li id="passage_bookmark_<%=passage.id%>" class="passage_option">Bookmark</li>
                <%}%>
                <%if(passage.author && user && passage.author._id.toString() == user._id.toString()){%>
                    <%if(passage.public_daemon != 2 && passage.default_daemon != true){%>
                        <li id="passage_edit_<%=passage.id%>" data-quill="false"class="passage_option">Edit</li>
                        <li id="passage_update_<%=passage.id%>" class="passage_option">Update</li>
                        <li id="passage_delete_<%=passage.id%>" class="passage_option passage_delete">Delete</li>
                    <%}%>
                    <div id="passage-share-modal-<%=passage._id%>" class="modal">
                        <input class="share-passage"id="share-passage-<%=passage._id%>"type="text" placeholder="Enter Username">
                    </div>
                    <a class="basic_link" href="#passage-share-modal-<%=passage._id%>" rel="modal:open"><li id="passage_share_<%=passage.id%>" class="passage_option">Share</li></a>
                    <%/*%>
                    <li id="passage-show-more-<%=passage._id%>" class="passage_option">More</li>
                    <span style="display:none;"id="passage-display-more-<%=passage._id%>">
                        <li id="passage-flag-<%=passage._id%>" class="passage_option">Flag</li>
                        <%if(LOCAL == 'true'){%>
                            <!-- Push passage to server -->
                            <li id="passage_push_<%=passage.id%>" class="passage_option">Push</li>
                            <input type="hidden" id="full_push_passage_<%=passage._id%>" value="<%=JSON.stringify(passage)%>">
                            <!-- Install to FileSystem -->
                            <li id="passage_install_<%=passage.id%>" class="passage_option">Install</li>
                        <%}%>
                    </span>
                    <%*/%>
                    <%if(LOCAL == 'true'){%>
                        <!-- Push passage to server -->
                        <li id="passage_push_<%=passage.id%>" class="passage_option">Push</li>
                        <input type="hidden" id="full_push_passage_<%=passage._id%>" value="<%=JSON.stringify(passage)%>">
                        <!-- Install to FileSystem -->
                        <li id="passage_install_<%=passage.id%>" class="passage_option">Install</li>
                    <%}%>
                <%}%>
                <%if(fromOtro){%>
                    <!-- Displayed via CES Connect -->
                    <!-- Pull passage from server -->
                    <li id="passage_pull_<%=passage._id%>" class="passage_option">Pull</li>
                    <form id="pull_form_<%=passage._id%>"style="display:none" action="/pull"method="POST"enctype="multipart/form-data">
                        <input type="text"name="passage"value="<%=JSON.stringify(passage)%>">
                        <input type="text"name="thumbnail"value="">
                    </form>
                    <input id="passage_json_<%=passage._id%>"type="hidden" value="<%=JSON.stringify(passage)%>">
                <%}%>
            </span>
        <%}else{%>
            <a class="basic_link" href="#passage_sources_modal_<%=passage._id%>" rel="modal:open"><li id="passage_sources_<%=passage.id%>" class="passage_option">Sources</li></a>
        <%}%>
        <%if(!passage.public && sub == true && subPassages){%>
            <li id="passage_alternate_<%=passage._id%>" class="passage_option">Alt</li>
        <%}%>
        <%if(user){%>
            <li style="display:none;"id="save-alternate-<%=passage.id%>" class="passage_option">Save Alt</li>
        <%}%>
    </ul>
    <!-- <div class="passage-box" style="text-align:center;padding:10px;margin-bottom:20px;">
        <div style=""class="p-image-container">
            <%if(passage.author.thumbnail != null){%>
                <div class="p-thumbnail"style="display:block;background:url('/uploads/<%=passage.author.thumbnail%>');background-size:cover;background-position: center center;"id="profile_settings_image" src="/uploads/<%=passage.author.thumbnail%>"></div>
                <%}else{%>
                    <ion-icon style="float:none;"class="profile_image"src="/images/ionicons/person-circle-outline.svg"></ion-icon>
                <%}%>
        </div>
        <div class="p-u-stars">
            70 stars given
        </div> -->
        <!-- <hr class="p-box-hr"> -->
    <!-- </div> --> 
    <div class="detail-div">
        <div class="p-padding-box">
            <div class="toppings">
            <div style=""class="p-image-container">
            <%if(passage.author.thumbnail != null){%>
                <div class="p-thumbnail"style="display:block;background:url('/uploads/<%=passage.author.thumbnail%>');background-size:cover;background-position: center center;"id="profile_settings_image" src="/uploads/<%=passage.author.thumbnail%>"></div>
                <%}else{%>
                    <ion-icon style=""class="profile_image"src="/images/ionicons/person-circle-outline.svg"></ion-icon>
                <%}%>
        </div><div class="p-date"><%- include('profile_thumbnail', {profile: passage.author}) %>, <%=passage.date.toLocaleDateString()%><br class="mobile-show"><span class="mobile-hide">&emsp;&emsp;</span><%if(passage.forum){%><ion-icon style="color:brown;"src="/images/ionicons/ellipse.svg"></ion-icon> Forum<%}else if(passage.public){%><ion-icon style="color:green;"src="/images/ionicons/ellipse.svg"></ion-icon> Task<%}else if(!passage.public){%><ion-icon style="color:red;"src="/images/ionicons/ellipse.svg"></ion-icon> Project<%}%><%if(passage.location){%> in <%-passage.location%><%}%></div></div>
    <div id="detail_title_<%=passage._id%>"class="detail_title"><h3><a style="color:white;"href="/passage/<%=passage.title == '' ? 'Untitled' : passage.title%>/<%=passage._id%>"><%=passage.title%></a></h3></div>
    <input value="<%=passage.params%>"id="passage_params_<%=passage._id%>"type="hidden" name="">
    <%if(passage.displayContent != null && passage.displayContent != ''){%>
        <hr class="hr">
        <%}%>
        <div class="detail_description" name="content" class="display_data_<%=passage._id%>"id="passage_detail_content_<%=passage._id%>"><%-passage.displayContent || passage.content%></div>
        <!-- <ul class="passage_tabs">
            <li class="passage_tab passage_tab_open_advanced">Advanced</li> -->
            <!-- Display Result -->
            <!-- <li class="passage_tab">Alternates</li> -->
        <!-- </ul> -->
    <%if(passage.author && user && passage.author._id == user._id){%>
        <%- include('editor') %>
    <%}else{%>
    <%}%>
    <canvas style="display:none;"id="thumbnail_canvas_<%=passage._id%>"></canvas>
    <% if(passage.filename){ %>
        <%passage.filename.forEach(function(fname, i){%>
            <%if(!passage.isSVG && passage.mimeType[i] == 'image'){%>
                <img class="passage-file-<%=passage._id%>"id="passage-file-<%=passage._id%>"src="/<%=getUploadFolder(passage)%>/<%=passage.filename[i]%>" alt="">
           <%}else if (passage.isSVG){%>
               <img class="passage-file-<%=passage._id%>"id="passage-file-<%=passage._id%>"src="/<%=getUploadFolder(passage)%>/<%=passage.filename[i]%>" alt="">
           <%}else if(passage.mimeType[i] == 'audio'){%>
               <%-passage.audio%>
           <%}else if(passage.mimeType[i] == 'video'){%>
               <%-passage.video%>
           <%}else if(passage.mimeType[i] == 'model'){%>
               <%if(passage.thumbnail == null){%>
                   <img id="p_thumbnail_<%=passage._id%>" alt="">
                   <!-- Create and upload thumbnail if it does not exist -->
                   <script>
                       var _id = "<%=passage._id%>";
                       const scene = new THREE.Scene();
                       const camera = new THREE.PerspectiveCamera( 75, 300 / 300, 0.1, 1000 );
                       var srcLink = "/<%=getUploadFolder(passage)%>/<%=passage.filename[i]%>";
                       const renderer = new THREE.WebGLRenderer();
                       renderer.domElement.id = "model_thumbnail_canvas_" + _id;
                       renderer.domElement.style = "display:none;";
                       renderer.setSize( 300, 300 );
                       $("#p_thumbnail_" + _id).after(renderer.domElement);
                       //load model into scene
                       var loader = new THREE.GLTFLoader();
                       loader.load(srcLink, function(data){
                           scene.add( data.scene );
                           camera.position.z = 5;
                           //make sure there is light to see the object
                           var light = new THREE.PointLight( 0xffffcc, 20, 200 );
                           light.position.set( 4, 30, -20 );
                           scene.add( light );
       
                           var light2 = new THREE.AmbientLight( 0x20202A, 20, 100 );
                           light2.position.set( 30, -10, 30 );
                           scene.add( light2 );
                           renderer.render(scene, camera);
                           //save snapshot of canvas to thumbnail field as data url
                           var base64Image = renderer.domElement.toDataURL();
                           $('#p_thumbnail_' + _id).attr('src', base64Image);
                           $.ajax({
                               type: 'post',
                               url: '/update_thumbnail/',
                               data: {
                                   passageID: _id,
                                   thumbnail: base64Image
                               },
                               success: function(data){
                                   // alert(data);
                               }
                           });
   
                           // $('#thumbnail_clip_' + id).val(base64Image);
                       });
                   </script>
               <%}else{%>
                   <img id="p_thumbnail_<%=passage._id%>" src="/<%=getUploadFolder(passage)%>/<%=passage.thumbnail%>" alt="">
               <%}%>
           <%}%>

        <%});%>
    <%}%>
    <!-- <div id="passage_details_advanced_<%=passage._id%>"class="passage_advanced"> -->
        <%if(passage.lang == 'mixed' && passage.lang != 'rich'){%>
            <div id="passage_detail_html_<%=passage._id%>"class="code_display display_html display_data_<%=passage._id%>"><pre><code class="language-html"></code><%=passage.displayHTML || passage.html || ''%></code></pre></div>
            <div id="passage_detail_css_<%=passage._id%>"class="code_display display_css display_data_<%=passage._id%>"><pre><code class="language-css"><%=passage.displayCSS || passage.css ||  ''%></code></pre></div>
            <div id="passage_detail_js_<%=passage._id%>"class="code_display display_js display_data_<%=passage._id%>"><pre><code class="language-javascript"><%=passage.displayJavascript || passage.javascript || ''%></code></pre></div>
        <%}else if(passage.lang != 'rich'){%>
            <div id="passage_detail_code_<%=passage._id%>"class="display_code display_data_<%=passage._id%>"><pre><code class="language-<%=passage.lang == 'daemon' || passage.lang == 'daemonFrame' ? 'javascript' : passage.lang%>"><%=passage.displayCode || passage.code%></code></pre></div>
        <%}%>
        <!-- Show .EXT -->
        <!-- Show License -->
    <!-- </div> -->
    <input id="passage_title_<%=passage._id%>"class="passage_title" value="<%=passage.title%>" type="hidden"name="title"placeholder="Title">
    <!-- Hide Iframe window if there is neither html nor js, or if it is not a daemon -->
    <%if((passage.lang != 'mixed') && (passage.lang != 'daemon' && passage.lang != 'daemonFrame') && (passage.displayHTML == null || passage.displayHTML == '') && (passage.displayJavascript == null || passage.displayJavascript == '')){%>
        <% hide = ' hide'; %>
    <%}else{%>
        <% hide = ''; %>
        <a target="_blank"href="/eval/<%=passage._id%>"><ion-icon title="Full Screen"src="/images/ionicons/expand-outline.svg"></ion-icon></a>
    <%}%>
    <div id="passage_iframe_<%=passage._id%>"class="passage_iframe<%=hide%>" id="result_div">
        <%if((user && passage.personal_cross_origin && user._id == passage.author._id) || (passage.public_daemon == 2)){%>
            <!-- Only allow daemon in scope -->
            <%if(sub === false || subPassages){%>
                <iframe class="iframe" src="/eval/<%=passage._id%>" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe>
            <%}else{%>
                <iframe class="iframe" src="/eval/<%=passage._id%>" frameborder="0" sandbox="allow-scripts"></iframe>
            <%}%>
        <%}else{%>
            <iframe class="iframe" src="/eval/<%=passage._id%>" frameborder="0" sandbox="allow-scripts"></iframe>
        <%}%>
    </div>
</div>
    <div class="bottom-bar">
        <div class="passage_stars"><%=parseInt(passage.stars)%> Star<%=passage.stars == 1 ? '' : 's'%> &emsp; 
            <% if(user){ %>
                <!-- Get min and max from input: Min is 1, Max is number of stars user has -->
                <input autocomplete="off" id="star_number_<%=passage._id%>"class="star_number"value="1"min="1"max="<%=user.stars%>"type="number" /> 
                &nbsp;&nbsp;<span id="passage_add_stars_<%=passage._id%>"class="add_stars">Invest</span>
            <% } %>
        </div>
    </div>
</div>
</div>
 <%if(subPassages && sub === false){%>
    <div style="display: inline;"id="sub_passages">
        <%subPassages.forEach(function(sub_passage) { %>
            <%- include('passage', {passage: sub_passage, sub: true}) %>
        <%}); %>
    </div>
    <ul class="page-count">
        <%if(!passage.public && !passage.forum){%>
        
        <%}else{%>
            <%for(var i = 1; i < totalPages + 1; i += 1){%>
                <%if(totalPages > 1){%>
                    <%if(!thread){%>
                        <a style="color:inherit;text-decoration:none;"href="/passage/<%=passage.title%>/<%=passage._id%>/<%=i%>"><li><%=i%></li></a>
                    <%}else{%>
                        <a style="color:inherit;text-decoration:none;"href="#thread/<%=passage.title%>/<%=passage._id%>/<%=i%>"><li><%=i%></li></a>
                    <%}%>
                <%}%>
            <%}%>
        <%}%>
    </ul>
<%}%>