<!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/tag.css">


    <% if (data.length> 0) { %>
      <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "<%= title %>",
        "description": "<%= description %>",
        "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[0].thumb %>",
        "thumbnailUrl": "<%= data[0].thumb %>",
        "keywords": "coloring pages tags, girl coloring page, animal coloring page, flower coloring page, fish coloring page, bird coloring page, printable, free coloring pages, art, color by number, paint by number",
        "contentRating": "General Audience",
        "hasPart": [
          <% for(let i = 0; i < Math.min(6, data.length); i++) { %>
            {
              "@type": "ImageObject",
              "name": "<%= data[i].title %>",
              "url": "https://art.pcoloring.com<%= data[i].uri %>",
              "contentUrl": "<%= data[i].thumb %>",
              "thumbnailUrl": "<%= data[i].thumb %>",
              "height": "480",
              "width": "480"
            }<%= i < Math.min(6, data.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') %>

    <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="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>

    <%- include('pagination') %>

      <div class="tag-cloud">
        <% tags.forEach(item=> { %>
          <a href="/<%= lang %>/tag/<%= item.tag %>" class="tag <%= item.tag == tag ? 'selected' : '' %>"
            style="color: <%= item.color %>;">
            <%= item.tag %>
          </a>
          <% }); %>
      </div>

</body>

</html>