{% extends 'base.njk' %}

{% block head %}
  <meta property="og:description" content="hyshare comic with {{pages|length}} pages"/>
  <meta property="og:url" content="{{base_url}}/comic/{{id}}">
  {% if pages | first %}
  <meta name="twitter:card" content="summary">
  <meta property="og:image" content="{{base_url}}/thumbnail/{{(pages | first).hash}}">
  <meta name="twitter:image" content="{{base_url}}/thumbnail/{{(pages | first).hash}}">
  {% endif %}
{% endblock %}

{% block body %}
  <div class="container mx-auto my-8 px-4 grow">
    <div class="flex flex-row flex-wrap items-baseline mb-4 gap-2">
      <h1 class="text-3xl font-semibold grow">{{ title }}</h1>
      <span class="badge badge-lg badge-outline">{{pages|length}} pages</span>
    </div>
    {% for page in pages %}
      {% if loop.first %}
        <div class="grid grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-2 mx-auto">
      {% endif %}
      <a href="/comic/{{id}}/{{page.hash}}" class="bordered card overflow-hidden" title="{% if page.volume %}Volume {{page.volume}} {% endif %}{% if page.chapter %} Chapter {{page.chapter}} {% endif %}Page {{page.page}}">
        <img 
            src="/thumbnail/{{page.hash}}" 
            class="{% if appConfig.comicFullThumbs %} object-contain {% else %} object-cover {% endif %} w-full h-full"
            loading="lazy"
            style="aspect-ratio: {% if appConfig.comicThumbAspectRatio %}{{appConfig.comicThumbAspectRatio}}{% elif appConfig.comicFullThumbs %}1/1{% else %}{{page.width}}/{{page.height}}{% endif %}"
          >
      </a>
      {% if loop.last %}
        </div>
      {% endif %}
    {% else %}
      <div class="hero h-full w-full">
        <div class="hero-content flex-col">
          <h1 class="sm:text-5xl font-bold text-3xl text-center">No Pages Found</h1>
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}