<!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/album.css">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "<%= data.title %>",
        "description": "<%= data.slogon %>",
        "url": "https://art.pcoloring.com<%= uri %>",
        "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
        "publisher": {
          "@type": "Organization",
          "name": "JCCY",
          "logo": {
            "@type": "ImageObject",
            "url": "https://art.pcoloring.com/assets/icon/icon.webp"
          }
        },
        "image": "<%= data.cover %>",
        "thumbnailUrl": "<%= data.icon %>",
        "keywords": "coloring pages album, <%= data.title %>, printable, free coloring pages, album, art, color",
        "contentRating": "General Audience",
        "hasPart": [
          <% for(let i = 0; i < data.contents.length; i++) { %>
            {
              "@type": "ImageObject",
              "name": "<%= data.contents[i].title %>",
              "url": "https://art.pcoloring.com<%= data.contents[i].uri %>",
              "contentUrl": "<%= data.contents[i].thumb %>",
              "thumbnailUrl": "<%= data.contents[i].thumb %>",
              "height": "480",
              "width": "480"
            }<%= i < data.contents.length - 1 ? ',' : '' %>
          <% }; %>
        ]
      }
  </script>

</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 class="album-header">
      <h1 style="color: purple">
        <%= data.title %>
      </h1>
      <img src="<%= data.cover %>" alt="<%= data.title %>">
      <h2 style="color: gray; font-size: 18px; padding: 10px">
        <%= data.slogon %>
      </h2>
    </div>

    <div class="content">
      <div class="image-grid">
        <% data.contents.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>


</body>

</html>