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

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

    <link rel="alternate" href="https://art.pcoloring.com/en/albums" hrefLang="en" />
    <link rel="alternate" href="https://art.pcoloring.com/zh/albums" hrefLang="zh" />
    <link rel="alternate" href="https://art.pcoloring.com/es/albums" hrefLang="es" />
    <link rel="alternate" href="https://art.pcoloring.com/pt/albums" hrefLang="pt" />
    <link rel="alternate" href="https://art.pcoloring.com/ja/albums" hrefLang="ja" />

    <link rel="stylesheet" href="/stylesheets/styles.css">
    <link rel="stylesheet" href="/stylesheets/header.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="content">
      <div class="album-grid">
        <% data.forEach(album=> { %>
          <div class="album-grid-card">
            <a href="/<%= lang %>/album/<%= album._id %>"><img src="<%= album.cover %>" class="album-cover-img"
                alt="<%= album.title %>"></a>
            <div style="padding: 0px 0px 4px 4px; font-size: 14px;">
              <%= album.title %>
            </div>
          </div>
          <% }); %>
      </div>
    </div>


</body>

</html>