<!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">

  <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/blog.css">
  <link rel="stylesheet" href="/css/navbar.css">
  <link rel="stylesheet" href="/css/search.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>
    </div>
    <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

  </div>

  <div id="layout" class="pure-g">
    <div class="sidebar pure-u-1">
      <div class="header">
        <h1 class="brand-title">Search Results</h1>
      </div>
    </div>

    <div id="main">

      <div class="content pure-u-1 pure-u-md-1" id='contents_page'>
        <div>
          <!-- A wrapper for all the blog posts -->
          <div class="posts" height='auto'>
            <h1>USERS</h1>
            <hr size='3px' color='black'>
          <%for(var i=0;i<users.length;i++){%>
            <section class="post">
              <header class="post-header">
                <%var str=users[i].avatar_template%>
                <%var str=url.substring(0,url.length-1)+str%>
                <%var str=str.replace('{size}','40')%>
                <h4> <img id="uimg" src='<%=str%>'>  <span><%=users[i].name%><br>@<%=users[i].username%> </span></h4>
                <a href="/user/<%=users[i].username%>" data-topic-id="3682" class="link_head">
                  <h6>View Profile</h6>
                </a>
                <button type="button" name="button">üì® Send Message</button>
              </header>

              <div class="post-description elip_here">
                <p class="para">

                </p>
              </div>

            </section>
            <hr>
          <%}%>
          </div>
          <div class="posts" height='auto'>
            <h1>POSTS</h1>
            <hr size='3px' color='black'>
          <%for(var i=0;i<posts.length;i++){%>
            <section class="post">
              <header class="post-header">
                <%var str=posts[i].avatar_template%>
                <%var str=url.substring(0,url.length-1)+str%>
                <%var str=str.replace('{size}','40')%>
                <img id="uimg" src='<%=str%>'>
                <h4>by <%=posts[i].name%> (@<%=posts[i].username%>)</h4>
                <%var topic=''%>
                <h4>Under Topic:
                <%for(var j=0;j<topics.length;j++){%>
                <%if(topics[j].id===posts[i].topic_id){%>
                  <%topic=topics[j].title%>
                  <%=topics[j].title%>
                  <%break;%>
                <%}%>
                <%}%>
                </h4>
                <a href="/post/t/<%=topic.split(' ').join('-')%>/<%=posts[i].topic_id%>/<%=posts[i].id%>" data-topic-id="3682" class="link_head">
                  <h6>View Post</h6>
                </a>
              </header>

              <div class="post-description elip_here">
                <p class="para">
                <%=posts[i].blurb.substring(0,97)%> ...
                </p>
              </div>

            </section>
            <hr>
          <%}%>
          </div>

          <div class="posts" height='auto'>
            <h1>GROUPS</h1>
            <hr size='3px' color='black'>
          <%for(var i=0;i<groups.length;i++){%>
            <section class="post">
              <header class="post-header">

                <h4><a href="group/<%=groups[i].slug%>/<%=groups[i].id%>"><%=groups[i].name%></a> (Post Count: <%=groups[i].post_count%>)</h4>

              </header>

              <div class="post-description elip_here">
                <p class="para">
                <%=groups[i].description%>
                </p>
              </div>

            </section>
            <hr>
          <%}%>
          </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>
</body>
</html>
