<!DOCTYPE html>
<html lang="<%= lang %>">

<head>
  <%- include('common-meta') %>

    <link rel="stylesheet" href="/stylesheets/header.css">
    <link rel="stylesheet" href="/stylesheets/designer.css">

</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-JBGGVGLHTP');
</script>

<body>
  <%- include('header') %>

  <h1 style="display: flex; justify-content: center; padding: 10px; color: purple">
    <%= title %>
  </h1>
  <h2 style="display: flex; justify-content: center; padding: 0px 10px 10px 10px; color: #333">
    <%= description %>
  </h2>

  <div class="container">
    <% data.forEach(item=> { %>
      <div class="card">
        <a href="/<%= lang %>/artist/<%= item._id %>"><img src="<%= item.avatar %>" alt="<%= meta.designerTitle[lang] %>: <%= item.username %>"></a>
        <div class="info">
          <p><strong>
              <%= item.username %>
            </strong></p>
          <p>
            <%= translate.worksCount[lang] %>: <strong>
                <%= item.count %>
              </strong>
          </p>
        </div>
      </div>
      <% }); %>
  </div>

</body>

</html>