
<%
  const network = page.network;
  const w = network + 'World';
  const world = site.data.worldi18n.worlds[w];
  const data = site.data[network].data;
  const numbers = site.data.numbers.list[network];
  const connections = data.connections;
  const stars = data.notable;
  const reading = world.reading;
%>

<section class="section-hero">
  <h3>
    <span><%- __('total') %></span><span> ~ <%= numbers.population %></span><span><%- __('accounts') %></span><sup>[1]</sup>
  </h3>
  <% if (numbers.activeUsers) { %>
    <h3>
      <span><%- __('active') %></span><span> ~ <%= numbers.activeUsers %></span><span><%- __('people') %></span><sup>[2]</sup>
    </h3>
  <% } %>
  <h3>
    <span><%- __('servers') %></span><span> > <%= numbers.podsNum %></span><span><%- __('instances') %></span><sup>
    <% if (numbers.activeUsers) { %>[3] <% } else { %> [2] <% } %>
    </sup>
  </h3>
</section>

<div class="section-title">
  <h2><%- __('world') %></h2>
</div>

<div class="section-wrapper">
  <div class="column">
    <div class="section">
      <h4><%- __('mascot') %></h4><span><%= world.mascot %></span>
    </div>
    <div class="section">
      <h4><%- __('dwellers') %></h4><span><%= world.dwellers %></span>
    </div>
  </div>
  <div class="column">
    <div class="section">
      <h4><%- __('communities') %></h4>
      <% if (data.communities) { %>
        <span><a href="<%= data.communities %>"><%= world.communities %></a></span>
      <% } else { %>
        <span class="u-temp"><%- __('soon') %></span>
      <% } %>
    </div>
    <div class="section">
      <h4><dfn title="The platform let's you follow users of these networks"><%- __('connections') %></dfn></h4>
      <ul class="article-list">
      <% for (item in connections) { %>
        <li class="u-inline"><%= connections[item] %><span>,&nbsp;</span></li>
      <% } %>
      </ul>
    </div>
  </div>
</div>

<p class="description"><%= world.descr %> <a href="<%= data.official %>">Join <%= page.title %> today!</a></p>

<% if (stars) { %>
<div class="section u-block with-image">
  <h4><%- __('stars') %></h4>
  <ul class="section-list">
    <% for (item in stars) { %>
    <li class="u-inline">
      <a href="<%= stars[item].url %>" title="<%= stars[item].name %>"><img src="<%= stars[item].avatar %>" alt="user"></a>
    </li>
    <% } %>
  </ul>
</div>
<% } %>

<% if (reading) { %>
<div class="section u-block">
  <h4><%- __('reading') %></h4>
  <ul>
    <% for (item in reading) { %>
      <li><a href="<%= reading[item].url %>"><%= reading[item].title %></a></li>
    <% } %>
  </ul>
</div>
<% } %>
