<!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/category.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 categories, animal coloring page, plant coloring page, people coloring page, fantasy coloring page, famous 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>
    <div class="category">
      <% categories.forEach(item=> { %>
        <a href="/<%= lang %>/category/<%= item.id %>" class="<%= tag == item.id ? 'selected' : '' %>">
          <%= item[lang] %>
        </a>
        <% }); %>
          <a href="/<%= lang %>/tag" style="color: #ff4081">
            <%= translate.more[lang] %>>>>
          </a>
    </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>

    <%- include('pagination') %>

</body>

</html>