<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="<%= /*cdnURL*/ %>/css/juxt.css">
    <script src="https://portal.cdn.pretendo.cc/js/pjax.min.js"></script>
    <script src="https://portal.cdn.pretendo.cc/js/juxt.js"></script>
    <link rel="manifest" href="/web/manifest.json">
    <!-- Global site tag (gtag.js) - Google Analytics Testing-->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-195842548-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-195842548-1');
    </script>

</head>
<body>
<div id="main">
    <%- include('nav_bar', { selection: 2 }); %>
    <div id="toast"></div>
    <div id="wrapper">
        <h2 id="title" class="page-header"><%= lang.global.communities %></h2>
        <h3 class="communities-header"><%= lang.all_communities.popular_places %></h3>
        <div id="popular" class="communities-wrapper">
            <% for(var i = 0; i < popularCommunities.length; i++) {%>
            <div class="community-list-wrapper" data-pjax="/communities/<%= popularCommunities[i].community_id %>/new">
                <img class="community-list-icon" src="<%= cdnURL %>/icons/<%= popularCommunities[i].community_id %>.png">
                <h2 class="community-list-title"><%= popularCommunities[i].name %></h2>
                <h4 class="community-list-followers"><%= popularCommunities[i].followers %> followers</h4>
            </div>
            <% } %>
        </div>
        <h3 class="communities-header"><%= lang.all_communities.new_communities %></h3>
        <div id="new" class="communities-wrapper">
            <% for(var j = 0; j < newCommunities.length; j++) {%>
                <div class="community-list-wrapper" data-pjax="/communities/<%= newCommunities[j].community_id %>/new">
                    <img class="community-list-icon" src="<%= cdnURL %>/icons/<%= newCommunities[j].community_id %>.png">
                    <h2 class="community-list-title"><%= newCommunities[j].name %></h2>
                    <h4 class="community-list-followers"><%= popularCommunities[j].followers %> followers</h4>
                </div>
            <% } %>
        </div>
    </div>
    <div id="wrapper">
        <button id="load-more-posts-button" data-offset="20" onclick="location.href='/communities/all'"><%= lang.all_communities.text %></button>
    </div>
</div>
</body>
</html>