---
import MicroBlog from "@components/templates/MicroBlog.astro";
import SimplePostList from "@components/templates/SimplePostList.astro";
import Base from "@layouts/Base.astro";
import {
  fromPosts,
  isMicro,
  isOriginal,
  sortLastUpdated,
} from "@lib/collection/helpers";
import { env } from "@lib/environment";

const { PUBLIC_SITE_TITLE } = env;

const originals = await fromPosts(
  isOriginal,
  (originals) => originals.sort(sortLastUpdated).slice(0, 10),
);
const micro = await fromPosts(
  isMicro,
  (originals) => originals.sort(sortLastUpdated)?.[0],
);
---

<Base title={PUBLIC_SITE_TITLE}>
  <main>
    <article>
      <h2>Viva abril!</h2>
      <figure>
        <blockquote lang="es-VE" translate="no">
          <i>«Los que le cierran el camino a la revolución pacífica le abren al
            mismo tiempo el camino a la revolución violenta.»</i>
        </blockquote>
        <figcaption>
          &mdash; Hugo Chávez.
          <p>
            <small>Tradução: &ldquo;Aqueles que fecham o caminho para a
              revolução pacífica abrem, ao mesmo tempo, o caminho para a
              revolução violenta&rdquo;.</small>
          </p>
        </figcaption>
      </figure>
      <p class="lead"><em>Portugal <em>fez</em> diferente!</em></p>
    </article>
    {
      (originals.length > 0 || micro) && (
        <section id="posts">
          <h2>Últimas aplicações atualizadas</h2>
          {micro && <div id="last-micro"><MicroBlog {...micro} /></div>}
          <div id="last-originals"><SimplePostList posts={originals} /></div>
        </section>
      )
    }
  </main>
</Base>

<style>
  figure:has(blockquote) {
    border-inline-start: 2px solid var(--color-active);
    padding-inline-start: calc(var(--size-7) * 1em);

    & > blockquote {
      margin-block-start: calc(var(--size-7) * 1em);
      margin-inline-start: 0;
      border-inline-start: 2px solid var(--color-light);
      padding-inline-start: calc(var(--size-7) * 1em);
    }
  }

  #posts {
    position: relative;

    & > h2 {
      float: inline-start;
    }
  }

  #last-micro {
    clear: inline-start;
    max-width: 40ch;
    margin-inline: auto;
  }

  #last-originals {
    clear: inline-start;
  }

  @media (width >= 30rem) {
    #posts {
      & > h2 {
        float: inline-start;
        max-width: calc(
          100svw
            - calc(
            50svw
              + calc(
              calc(2 * calc(var(--size-4) * 1em)) + calc(var(--size-2) * 1em)
            )
          )
        );
      }
    }

    #last-micro {
      clear: none;
      float: inline-end;
      width: 50svw;
      margin-inline-start: calc(var(--size-2) * 1em);
      margin-block-end: calc(var(--size-2) * 1em);
    }
  }
</style>