---
import SiteLayout from "./SiteLayout.astro";
import SiteSidebar from "./SiteSidebar.astro";
import { categoryHref, excerptFromBody, formatDate, slugify, tagHref } from "../lib/archive";

const {
  title,
  heading,
  description,
  pathname,
  entries = [],
  currentPage = 1,
  totalPages = 1,
  pageHref,
} = Astro.props;
---

<SiteLayout
  title={`${title} &#8211; FFWPU Ireland`}
  description={description}
  bodyClass="archive custom-background tribe-no-js metaslider-plugin parabola-image-three caption-light meta-light parabola_triagles parabola-menu-left"
  pathname={pathname}
  canonical={pathname}
>
  <div id="main">
    <div id="forbottom">
      <div style="clear:both;"> </div>

      <section id="container" class="two-columns-right">
        <div id="content" role="main">
          <header class="page-header">
            <h1 class="page-title" set:html={heading} />
          </header>

          <div class="content-masonry archive-list">
            {
              entries.map((entry) => {
                const categories = entry.data.categories ?? [];
                const tags = entry.data.tags ?? [];
                const title = entry.data.title ?? "Untitled";
                const publishedDate = formatDate(entry.data.published);

                return (
                  <article class:list={["post", "type-post", "status-publish", "format-standard", "hentry", categories.map((category) => `category-${slugify(category)}`)]}>
                    <h2 class="entry-title">
                      <a href={entry.data.source}>{title}</a>
                    </h2>
                    <div class="entry-meta">
                      &nbsp; <span class="author vcard">By <a class="url fn n" rel="author" href="#" title="View all posts by Fami1yfed">Fami1yfed</a></span>
                      {
                        publishedDate && entry.data.source && (
                          <span>
                            <time class="onDate date published" datetime={entry.data.published}>
                              {" "}
                              <a href={entry.data.source} rel="bookmark">{publishedDate}</a>
                              {" "}
                            </time>
                          </span>
                        )
                      }
                      {
                        categories.length > 0 && (
                          <span class="bl_categ">
                            {" "}
                            {categories.map((category, index) => (
                              <>
                                <a href={categoryHref(entry, category)} rel="tag">{category}</a>
                                {index < categories.length - 1 ? ", " : " "}
                              </>
                            ))}
                          </span>
                        )
                      }
                    </div>
                    <div class="entry-content">
                      <p>{excerptFromBody(entry.body)}</p>
                    </div>
                    {
                      tags.length > 0 && (
                        <footer class="entry-meta">
                          <div class="footer-tags">
                            <span class="bl_posted">Tagged</span>&nbsp;{" "}
                            {tags.map((tag, index) => (
                              <>
                                <a href={tagHref(tag)} rel="tag">{tag}</a>
                                {index < tags.length - 1 ? ", " : "."}
                              </>
                            ))}
                          </div>
                        </footer>
                      )
                    }
                  </article>
                );
              })
            }
          </div>

          {
            totalPages > 1 && pageHref && (
              <div class="pagination_container">
                <nav class="pagination" aria-label="Archive pagination">
                  {currentPage > 1 && <a href={pageHref(currentPage - 1)}>&lsaquo;</a>}
                  {Array.from({ length: totalPages }, (_, index) => index + 1).map((page) =>
                    page === currentPage ? <span class="current">{page}</span> : <a href={pageHref(page)} class="inactive">{page}</a>
                  )}
                  {currentPage < totalPages && <a href={pageHref(currentPage + 1)}>&rsaquo;</a>}
                </nav>
              </div>
            )
          }
        </div>

        <SiteSidebar />
      </section>

      <div style="clear:both;"></div>
    </div>
  </div>
</SiteLayout>