<!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/badges.css">
    <link rel="stylesheet" href="/css/navbar.css">
</head>

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

        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            <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>
            <a href='/badges' class="active">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 class="topnav1" id="myTopnav">
      <a href='/profile'>Summary</a>

        <a href='/badges' class="active">Badges</a>



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

      <div id="main">
          <div class="content">
            <div class="info">
              <%var str=curr_user.avatar_template;%>
              <%var str=str.replace('{size}','80');%>
              <%var url=url.substring(0,url.length-1);%>
  <h1> <img src='<%=url%><%=str%>' alt="profile pic round" id='uimg'>  <span><%=curr_user.name%><br>@<%=curr_user.username%><br><%=curr_user.user_fields['1']%></span></h1>


             <hr color='black' size='3px'>
            </div>
            <div class="data">
              <h3>Badge Count: <%=curr_user.badge_count%></h3>
              <%if(userBadges.length!==0){%>
                <ul>
                  <%for(var i=0;i<badges.length;i++){%>
                      <li>
                        <h5><%=badges[i].name%></h5>
                        <%badges[i].description=badges[i].description.replace( /(<([^>]+)>)/ig, '');%>
                        <h6><%=badges[i].description%></h6>
                        <img src="<%=badges[i].image%>" alt="badge_img" id='bimg'>
                        <hr size='0.5px' color='black'>
                      </li>
                  <%}%>
                </ul>
              <%}%>
              <%if(userBadges.length===0){%>
                <h4>No badges yet</h4>
              <%}%>
            </div>


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


      </div>
  </div>


</center>


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

    <script>
    //Navbar
          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>
