<!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="/css/post.css">
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.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">
                <h2 class="brand-title"><%=body.title%></h2>
                <br>
                  <button type="button" name="button">Category:
                  <a href="" id='cat' name='<%=body.category_id%>'>Unknown</a>
                  </button>



            </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">
                  <%if(body.post_stream && body.post_stream.posts){%>
                    <%for(var i=0;i<body.post_stream.posts.length;i++){%>
                        <h3 class="subhead">@<%=body.post_stream.posts[i].username%> <%=body.post_stream.posts[i].name%></h3>

                        <div>
                            <%-body.post_stream.posts[i].cooked%>

                        </div>
                        <br>
                        <hr></hr>
                        <%var ko=body.post_stream.posts[i].post_number;%>

                    <%}%>
                    <%}%>
                    <div id="holder2">

                    </div>
                    <form>
                        <button type="button" id="HButton2"> Load More </button>
                    </form>
             </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>








    <script src="/js/ui.js"></script>
    <script>
        $(document).ready(function () {
          $.ajax({
            url:'/categories'
          }).done((data)=>{
              var cat_id=Number($('#cat').attr('name'));
              for(var i=0;i<data.length;i++){
                  if(cat_id===data[i].id){

                    $('#cat').html(data[i].name);
                    if(data[i].name==='Blogs'){
                      $('#cat').attr('href','/blog');
                    }
                    if(data[i].name==='Projects'){
                      $('#cat').attr('href','/project');
                    }
                    else{
                    var url='/group/'+data[i].slug+'/'+data[i].id;
                    $('#cat').attr('href',url);
                    }

                    break;
                  }
              }
          });
            var l = (<%=ko%>);

            var my_div = $("#holder2");
            $("#HButton2").on("click", function () {
              //alert("hi");

                $.ajax({
                    url: "/post/more/t/<%=body.slug%>/<%=body.id%>/"+l
                })

                    .done(function (data) {


                        var elements = '';
                        var i;
                        if(data[0].post_number>l){
                             i=0;}
                        else{
                            i=l-data[0].post_number+1;
                        }
                        if(i<data.length){

                        for(;i<data.length;i++){

                          elements= elements +'<h3 class="subhead">'+'@'+data[i].username +data[i].name+'</h3>'+'<div>'+data[i].cooked+'</div>'+'<br>'+'<hr></hr>';
                           ko=data[i].post_number
                        }
                       l=ko;
                    }
                    else{
                        elements+="No more to load";
                    }
                        $('#holder2').append(elements);
                    });
            });
        });
    </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>
