<div id="side_panel">
    <div id="side_panel_inner">
      <div id="side_panel_close">
        <ion-icon src="/images/ionicons/close-circle-sharp.svg"></ion-icon>
      </div>
      <div id="side_panel_body">
        <div class="header">
                  <select id="right_side_select" autocomplete="off">
                      <option value="help">Help</option>
                      <option value="bookmarks">Bookmarks</option>
                      <option value="daemons">Daemons</option>
                      <option value="passages">Graphics</option>
                      <option value="brief">Brief</option>
                  </select>
              </div>
              <!-- For Pagination -->
              <input id="search_val"type="hidden"autocomplete="false">
              <!-- Shows only one child at a time -->
              <div id="side_panel_switcher">
                <!-- For Chapters -->
                <div id="daemons"></div>
                <!-- Brief -->
                <div id="brief">
                  <!-- <div id="brief_blocker"></div>
                  <div id="right_passages"></div> -->
                  <%if(typeof passage != 'undefined' && passage.passages){%>
                  <div id="brief-passages">
                    <%var title;%>
                    <%for(const p of passage.passages){%>
                    <%title = p.title == '' ? 'Untitled' : p.title;%>
                    <h2 class="brief-passage"><a href="/passage/<%=encodeURIComponent(title)%>/<%=p._id%>"><%=title%></a></h2>
                    <%}%>
                    </div>
                  <%}%>
                  <!-- Button to update order if private passage and author -->
                  <!-- <button>Update Order</button><br><br> -->
                  <!-- just show passage titles -->
                </div>
                <!-- Passages -->
                <div id="search_passages">
                  <div>
                        <input class="control_input"id="ppe_search"placeholder="Search Passages" type="" name="" autocomplete="off">
                        <div id="ppe_queue">
                          <!-- <input placeholder="Search..."id="ppe_search"class="control_input"type="text" name=""> -->
                          <div class="ppe_canvas_container ppe_queue_selected">
                              <h3>Mutation</h3>
                            <canvas id="ppe_mutation"class="ppe_queue_canvas" width="100" height="100"></canvas>
                          </div>
                          <ion-icon title="View More"style="font-size:2em;display:inline-block;padding-bottom:10px;cursor:pointer;"id="ppe_queue_view_more"class=""title="View More"src="/images/ionicons/add-circle-outline.svg"></ion-icon>
                        </div>
                    </div>
                    <div id="cats"></div>
                </div>
                <!-- Bookmarks -->
                <div id="bookmarks">
                    <!-- <input value="{}"id="queue_passages"type="hidden" name="" autocomplete="off"> -->
                    <!-- If logged in display from database -->
                    <%if(user != null){%>
                      Logged In
                    <!-- Otherwise use localStorage -->
                    <%}else{%>
                      Logged Out
                    <%}%>
                </div>
                <!-- Console -->
                <div id="console_div">
                    <textarea id="console" class="control_textarea" autocomplete="off"></textarea>
                    <button class="control_button">Add to Queue</button>
                </div>
                <!-- Edit -->
                <div id="edit_div">
                    
                </div>
                <!-- Leaderboard -->
                <div id="leaderboard_div">
                    Leaderboard coming soon
                </div>
                <!-- Help -->
                <div id="help_div">
                  <h1>Engineering Solutions for the Church</h1>
                  <p>
                      Christian Engineering Solutions (CES) is a Not for Profit Organization specializing in collaborative solutions development for the Church. In the Spirit of Jesus Christ, we are to spread the gospel throughout the Earth, taking care to be good examples of Christ Jesus by serving others. CES is designed to help the Church meet these goals in the most rigorous manner possible.
                  </p>
                  <h1>Our Technology</h1>
                  <p>
                      Our Technology is scripture based in its goals and foundations. Open-Source and Free, one may use our services to both learn and solve problems with the goals of helping others and growing closer to God.
                  </p>
                  <h1>Features</h1>
                  <h3>Merit-based Reputation and Rewards</h3>
                  <h3>Streamlined Search and Citations</h3>
                  <h3>Modular Applications</h3>
                  <h3>Peer-to-Peer and Encryption Technologies <span style="font-size:1em;font-weight:normal;">(Under Development)</span></h3>
                  <h1>External Repository</h1>
                  <h3><a target="_blank"href="https://github.com/ChristianEngineeringSolutions/ChristianEngineeringSolutions">https://github.com/ChristianEngineeringSolutions/ChristianEngineeringSolutions</a></h3>
                  <hr>
                  <h5>Setup Account with email to earn rewards from reputation and donations.</h5>
                </div>
              </div>
      </div>
    </div>
  </div>