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

<head>
  <%- include('common-meta') %>
    <link rel="stylesheet" href="/stylesheets/styles.css">
    <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') %>
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px;">
      <h1><%= translate.coloringPageArtist[lang] %>: <%= user.username %></h1>
      <a href="/<%= lang %>/artist/<%= user._id %>"><img src="<%= user.avatar %>" style="border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);" alt="<%= user.username %>"></a>
      <h2 style="font-size: 14px; color: gray;"><%= user.count %> Coloring Page Works</h2>
    </div>

    <div class="content">
      <div class="image-grid">
        <% data.forEach(item=> { %>
          <div class="image-card">
            <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
            <div class="card-title">
              <%= item.title %>
            </div>
          </div>
          <% }); %>
      </div>
    </div>

    <div style="padding: 40px"></div>

    <%- include('pagination') %>

</body>

</html>