<!doctype html>
<html amp lang="en">

<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>STEMChat</title>

  <link rel="manifest" href="./manifest.webmanifest" crossorigin="use-credentials">
  <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/modal.css">
  <link rel="stylesheet" href="/css/groups.css">
  <link rel="stylesheet" href="/css/navbar.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</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='/' class="active">Home</a>
      <a href='<%=about%>'>About</a>
      <%if(curr_user){%>
      <a href="<%=home%>" id='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>
      <%}%>
      <form class="" action="/search_site" method="post">
        <center>
        <input class="search-bar" type="text" placeholder="Search.." name="search_text">
        <button class="search-but" name="search_button" type="submit">üîç</button>

      </center>
      </form>
      <br>
        </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">COOOL STEMGames</h1>
                <h2 class="brand-tagline"> Welcome to metaStudio! This is a platform for Collaborative Open Online and Ongoing Learning through STEM (Science, Technology, Engineering, and Mathematics) games.</h2>
                <h4>

                </h4>

            </div>
        </div>

        <div id="main">
          <div class="content pure-u-1 pure-u-md-1">


                <div>
                    <!-- A wrapper for all the blog posts -->
                    <div class="posts">

      <!-- A single blog post -->
      <%for(var i=0;i<groups.length;i++){%>
      <%if(1==1){%>
      <%if(groups[i].uploaded_logo!=null){%>
      <%var str=groups[i].uploaded_logo.url;%>
      <%str=url.substring(0,url.length-1)+str;%>
      <%}%>
          <%if(groups[i].uploaded_logo==null){%>
      <%str="stemlogo.png";%>
      <%}%>



      <section class="post">
        <header class="post-header">

          <h1 class="content-subhead"></h1>
          <a href="/group/<%=groups[i].slug%>/<%=groups[i].id%>" data-topic-id="3682" class="link_head">
      <h1><%=groups[i].name.split('_').join(' ')%></h1>

      </a>

      <img height="80" width="80" id="plus2" src=<%=str%>>
      <p class="post-meta">
        Topic Count: <%=groups[i].topic_count%>
      </p>
      <p class="post-meta">
        Post Count: <%=groups[i].post_count%>
      </p>
      </header>

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

      </div>

      </section>
      <%}}%>

    </div>

  </div>
  <br>
  <div>
    <!-- A wrapper for all the blog posts -->
    <div class="posts">
      <h1>Latest Topics</h1>


      <!-- A single blog post -->
      <%for(var i=0;i<topics.length;i++){%>
      <section class="post">
        <header class="post-header">

          <h1 class="content-subhead"></h1>
          <a href="/post/t/<%=topics[i].title.split(' ').join('-').split('/').join('-')%>/<%=topics[i].id%>/1"
            data-topic-id="3682" class="link_head">
            <h1><%=topics[i].title.split('_').join(' ').split('/').join('-')%> <%if(topics[i].pinned){%>
              üìå
              <%}%></h1>
          </a>


          <p class="post-meta">
            Post Count: <%=topics[i].posts_count%>
              <br>
              ‚ù§Ô∏è: <%=topics[i].like_count%>
              </p>
        </header>

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

      </section>
      <%}%>
</div>
</div>
      <img id="plus" src="plus.png">
    </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>
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span  style="cursor:pointer" class="close">‚úñ</span>
        <center>
        <center>
        <h1 id='modal_head'>Create Topic</h1>
        </center>
        <form action="/" method="POST" id='topic_form'>

          <input type="text" name="title" required='' autocomplete="off" placeholder="Title"> <br>
          <textarea name="desc" required='' autocomplete="off" placeholder="Description"></textarea> <br>
          <select id = "multi-role" name='category' required="" placeholder='Select a Category'>
              <option value="" disabled selected>Select your Category</option>
          </select>
          <br>
          <br>
          <button class="button-tertiary" type="button" name="pvt_msg" id='pvt_msg'>Switch to Private Message</button>
          <br>
          <p align="right">
          <button class="button-secondary" type="submit" id='on_but' name="compose_topic">Compose</button>
          </p>
        </form>

        <form action="/" method="POST" id='pvt_msg_form'>

          <input type="text" name="title" required='' autocomplete="off" placeholder="Title"> <br>
          <textarea name="desc" required='' autocomplete="off" placeholder="Description"></textarea> <br>

          <input type="text" name="user_search" placeholder="Add User" list="users1" autocomplete="off" required=''>
          <datalist id='users1'>

          </datalist>
          <br>
          <br>

          <button class="button-tertiary" type="button" name="topic" id='create_topic'>Switch to Create Topic</button>
          <br>
          <p align="right">
          <button  class="button-secondary" type="submit" id='on_but' name="compose_pvt_msg">Compose</button>
          </p>
        </form>
      </center>
      </div>

    </div>
    <script src="/js/add_sw.js" charset="utf-8"></script>
    <script src="/js/ui.js"></script>
    <script src="/js/groups.js" charset="utf-8"></script>
</body>

</html>
