<!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/group.css">
    <link rel="stylesheet" href="/css/modal.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="layout" class="pure-g">
        <div class="sidebar pure-u-1">
            <div class="header">
                <h1 class="brand-title"><%=topic_head.name%></h1>
            </div>
        </div>

        <div id="main">

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

            <button class="tablink" onclick="openPage('Users_list', this, 'green')">Users</button>
            <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">Topics</button>


            <div id="Users_list" class="tabcontent">

              <%if(body3 && body3.users){%>
                <%for(var i=0;i<body3.users.length;i++){%>



                <section class="post">
                    <header class="post-header">
                        <%var str=body3.users[i].avatar_template %>
                        <%str=str.replace("{size}","80")%>
                        <%str=url.substring(0,url.length-1)+str%>




                        <h3><a class="name_" href="/user/<%=body3.users[i].username%>"><%=body3.users[i].name%></a><img id="plus2" src='<%=str%>' onerror="this.onerror=null;this.src='/stemlogo.png';"></h3>

                        <h1 class="content-subhead">@<%=body3.users[i].username%></h1>


                    </header>



                </section>
                <%}%>
                <%}%>


            </div>
            <div id="News" class="tabcontent">
                  <%if(body3 && body3.topic_list){%>
                <%for(var i=0;i<body3.topic_list.topics.length;i++){%>


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



                        <%var str;%>
                       <% if(body3.topic_list.topics[i].image_url!=null){%>
                        <%str=body3.topic_list.topics[i].image_url;%>
                       <% }%>
                       <% if(body3.topic_list.topics[i].image_url===null){%>
                        <%str="/stemlogo.png";%>
                       <% }%>





                        <h3><a class="name_" href="/post/t/<%=body3.topic_list.topics[i].slug%>/<%=body3.topic_list.topics[i].id%>/1"><%=body3.topic_list.topics[i].title%></a><img height="100" width="100" id="plus2" src='<%=str%>' onerror="this.onerror=null;this.src='/stemlogo.png';"></h3>
                        <%if(body3.topic_list.topics[i].last_poster_username!=null){%>
                        <h1 class="content-subhead">@<%=body3.topic_list.topics[i].last_poster_username%></h1>
                        <%}%>
                            <%if(body3.topic_list.topics[i].last_poster_username==null){%>
                        <h1 class="content-subhead"></h1>
                        <%}%>

                        </header>

                        <div class="post-description elip_here">





            </div>

            </section>
            <%}%>
            <%}%>

            <div id="holder2">

            </div>
            <form>
                <button type="button" id="HButton2"> Load More </button>
            </form>
            </div>





            <img id="plus" src="/plus.png">

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

    </div>

    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span  style="cursor:pointer" class="close">✖</span>
        <center>
        <h1>Create Topic</h1>
        <form action="/group/<%=topic_head.slug%>/<%=topic_head.id%>" method="POST">

          <input type="text" name="title" required='' autocomplete="off" placeholder="Title"> <br>
          <input type="text" name="desc" required='' autocomplete="off" placeholder="Description"> <br>
          <select id = "multi-role" name='category' required="" placeholder=''>
              <option value="<%=topic_head.id%>"  selected><%=topic_head.name%></option>

          </select>
          <br>
          <button type="submit" id='on_but' name='create_topic'>Create</button>

        </form>
      </center>
      </div>
      <%if(curr_user){%>
      <div class="user">

      </div>
      <%}%>
    </div>

    <script src="/js/ui.js"></script>
    <script src="/js/group.js" charset="utf-8"></script>
    <script type="text/javascript">

    //Loading Topics and Users in a group/category

           var my_div = $("#holder2");
           var l=1;
            $("#HButton2").on("click", function () {
                console.log("hi");

                   $.ajax({

                    url: "/group/<%=topic_head.slug%>/<%=topic_head.id%>/load/"+l
                })
                    .done(function (data) {
                        var elements = '';
                        for(var i=0;i<data.topic_list.topics.length;i++){
                            var str='/stemlogo.png';
                            if(data.topic_list.topics[i].image_url){
                            str=data.topic_list.topics[i].image_url ;
                            }
                            elements = elements +'<section class='+"post"+'>'+'<header class="post-header">'+'<h3>'+'<a class="name_" href="/post/t/'+data.topic_list.topics[i].slug+"/"+data.topic_list.topics[i].id+'/1">'+data.topic_list.topics[i].title+'</a>'+'<img height="100" width="100" id="plus2" src='+str+'>'+'</h3>'+ '<h1 class="content-subhead">'+ "@"+data.topic_list.topics[i].last_poster_username +'</h1>'+ '</header>'+'<div class="post-description elip_here">'+'</div>'+'</section>';
                        }
                        l=l+1;
                        console.log(l);
                        $('#holder2').append(elements);
                    });
            });
    </script>
</body>

</html>
