<html>
<head>
    <link rel="stylesheet" type="text/css" href="<%= cdnURL %>/css/juxt.css">
    <script src="<%= cdnURL %>/js/pjax.min.js"></script>
    <script src="<%= cdnURL %>/js/juxt.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-279PNEDGEE"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-279PNEDGEE');

        <!-- Google Tag Manager -->
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-T9NZ7BK');</script>
    <!-- End Google Tag Manager -->
    </script>
</head>
<body>
<%- include('nav_bar', { selection: 2 }); %>
<div id="main">
    <h1 class="page-header"><%= lang.all_communities.text %></h1>
    <div class="search-container">
        <form>
            <div id="search-icon"></div>
            <input id="search-bar" onchange="searchCommunities()" onkeyup="searchCommunities()" type="text" placeholder="<%= lang.all_communities.search %>" name="search">
        </form>
    </div>
    <div id="community-list" class="communities-wrapper">
        <table style="padding-top: 30px">
            <tbody>
            <tr>
                <% for(var i = 0; i < communities.length; i++) {%>
                    <td>
                        <div class="community-list-wrapper" data-pjax="/communities/<%= communities[i].community_id %>/new">
                            <img class="community-list-icon" src="<%= cdnURL %>/icons/<%= communities[i].community_id %>.png">
                            <h2 class="community-list-title"><%= communities[i].name %></h2>
                            <h4 class="community-list-followers" <%if(communities[i].name.length < 16) {%> style="margin-top: 45px" <%}%>><%= communities[i].followers %> followers</h4>
                        </div>
                    </td>
                    <% if( (i + 1) % 3 === 0) { %>
            </tr>
            <tr>
                <% } %>
                <% } %>
            </tr>
            </tbody>
        </table>
    </div>
    <img src="" onerror="wiiuBrowser.showLoadingIcon(!1);window.scroll(0, 0);">
</div>
<img src="" onerror="wiiuBrowser.showLoadingIcon(!1);">
</body>
</html>