{{- extends "layout/default" }}
{{- import "blocks/pagination" }}
{{- block body() }}
<div class="row justify-content-center g-4">
	<div class="col-12 mb-5">
    <!-- Tag header -->
    <div class="custom-card bg-charcoal-surface1">
      <div class="row g-0">
        <!-- Tag information -->
        <div class="col-md-8">
          <div class="custom-card-body p-4">
            <!-- <div class="d-flex flex-wrap justify-content-between align-items-start"> -->
            <h2 class="display-6 fw-bold me-2">{{ .Tag.Title }}</h2>
            <p class="lead"><span class="fw-bold">{{ .Tag.Total }}</span> <span class="fw-medium text-muted">articles</span></p>
            <!-- </div> -->
            <!-- mb-0 to remove the extra bottom margin Bootstrap adds to p class="lead" -->
            <p class="lead mb-0">{{ .Tag.Description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
      {{- range .Tag.Articles }}
        {{- include "fragments/pixivisionArticle" . }}
      {{- end }}
    </div>
  </div>

  <!-- Pagination -->
  {{- url := "/pixivision/t/" + .ID + "?p=" }}
  {{- paginationData := createPaginator(url, "#checkpoint", .Page, -1, 1, 5) }}
  {{- yield pagination(data=paginationData) }}
</div>
{{- end }}