<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>STEMChat</title>
       <link rel="shortcut icon" href="/favicon.ico">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" href="/css/pure_css.css">
     <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css" />
    <link rel="stylesheet" href="/css/user.css">
    <link rel="stylesheet" href="/css/navbar.css">
</head>

<body>

     <div class="topnav" id="myTopnav1">
         <a href="javascript:void(0);" class="icon" onclick="myFunction1()">
             <i>☰</i>
         </a>

         <!-- Navigation links (hidden by default) -->
         <div id="myLinks">
             <a href="javascript:history.back()"  class="active">⬅️ Go Back</a>
             <a href="/">Home</a>
             <a href='<%=about%>'>About</a>
             <%if(curr_user){%>
                 <a href='<%=home%>'>Chat</a>
                <%}%>

             <a href='<%=blog%>'>Blogs</a>
             <a href='<%=project%>'>Projects</a>

             <a href='<%=feedback%>'>Feedback</a>
             <%if(curr_user){%>
                <a href='/profile'>Profile</a>
                 <%}%>
            <%if(!curr_user){%>
                 <a href='<%=home%>'>Login</a>
                <%}%>
            <%if(curr_user){%>
                 <a href="<%=logout%>">Logout</a>
                 <%}%>
         </div>
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

     </div>



        <div id="main">

             <div class="content pure-u-1 pure-u-md-1">
               <div>
                  <%var str=user_det.avatar_template ;%>
                   <% str=str.replace("{size}","80");%>
                   <%str=url.substring(0,url.length-1)+str;%>
                  <h2><img src='<%=str%>' id='uimg'>  <span><%=user_det.name%><br>@<%=user_det.username%></span></h2>
                  <%-user_det.bio_cooked%>
                    <p>
                       <%if(user_det.website && user_det.website_name){%>
                     Visit me at:<a href='<%=user_det.website%>'></a> <%=user_det.website_name%></a>
                      <%}%>
                  </p>
                  <p>
                      <%if(user_det.location){%>
                      Location: <%=user_det.location%>
                      <%}%>
                  </p>
                  <hr color='black' size='3px'>
                  <div class="data">
                      Created: <%=user_det_more.created_at.split('T').join(', ').split('.')[0]%>
                      <br>
                      <%if(user_det_more.last_seen_at){var ls=user_det_more.last_seen_at.split('T').join(', ').split('.')[0]}%>
                      <%if(user_det_more.last_seen_at){%>
                      Last seen at: <%=ls%>
                      <%}%>
                      <br>
                      Days Visited: <%=user_det_more.days_visited%>
                      <br>
                      <%var hr=Math.floor(user_det_more.time_read/3600);%>
                      <%var min=Math.floor(user_det_more.time_read/60)%>
                      Read Time: <%=hr%>hrs and <%=min%> mins
                      <br>
                      Topics Read: <%=user_det_more.topics_entered%>
                      <br>
                      Posts Read: <%=user_det_more.posts_read_count%>
                      <br>
                      Likes Given ❤️: <%=user_det_more.like_given_count%>
                      <br>
                      Topics Created: <%=user_det_more.topic_count%>
                      <br>
                      Posts Created: <%=user_det_more.post_count%>
                      <br>
                      Likes Received ❤️: <%=user_det_more.like_count%>
                      <hr>

                    </div>


                    <h2>Groups</h2>
                    <ul>


                    <%for(var i=0;i<user_det.groups.length;i++){%>
                      <%if(!user_det.groups[i].name.includes('trust_level')){%>
                     <li>
                        <header class="post-title">

                            <h4><a href="/group/<%=user_det.groups[i].name%>/<%=user_det.groups[i].id%>"><%=user_det.groups[i].name.split('_').join(' ')%></a> </h4>

                        </header>

                      </li>
                      <%}%>
                    <%}%>
                    </ul>

                    <h2>Topics</h2>
                    <ul>


                    <%for(var i=0;i<summary.topics.length;i++){%>
                      <%if(1===1){%>
                      <li>
                        <header class="post-title">

                            <h4><a href="/post/t/<%=summary.topics[i].slug%>/<%=summary.topics[i].id%>/1"><%=summary.topics[i].title.split('_').join(' ')%></a> </h4>

                        </header>

                      </li>
                      <%}%>
                    <%}%>
                    </ul>
                    <h2>Top links</h2>
                    <ul>
                        <%for(var i=0;i<summary.user_summary.links.length;i++){%>
                            <%if(1===1){%>
                            <li>
                              <header class="post-title">
          <%if(summary.user_summary.links[i].title){%>
                                  <h4><a href=<%=summary.user_summary.links[i].url%>><%=summary.user_summary.links[i].title%></a> </h4>
          <%}%>
          <%if(!summary.user_summary.links[i].title){%>
            <h4><a href=<%=summary.user_summary.links[i].url%>><%=summary.user_summary.links[i].url%></a> </h4>
            <%}%>
                              </header>

                            </li>
                            <%}%>
                          <%}%>



                    </ul>




            </div>




                 <div class="footer">
                     <div class="pure-menu pure-menu-horizontal">

                         <center>
                          <!--
                           <div class='foot'>
                               <p> MADE BY BITS 2020</p>
                           </div>
                          -->
                         </center>
                     </div>
                 </div>
             </div>
        </div>

     <script src="/js/ui.js"></script>


     <script>
          function myFunction1() {
             var x = document.getElementById("myTopnav1");
             if (x.className === "topnav") {
                 x.className += " responsive";
             } else {
                 x.className = "topnav";
            }
         }
        function myFunction() {
             var x = document.getElementById("myTopnav");
             if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
     <script>
         function openPage(pageName, elmnt, color) {
            // Hide all elements with class="tabcontent" by default */
             var i, tabcontent, tablinks;
             tabcontent = document.getElementsByClassName("tabcontent");
             for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
             }

             // Remove the background color of all tablinks/buttons
              tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
             }

             // Show the specific tab content
             document.getElementById(pageName).style.display = "block";

            // Add the specific color to the button used to open the tab content
            elmnt.style.backgroundColor = color;
        }

        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();
    </script>
</body>
</html>
