<?php if (!empty($pageContent)): ?>
    <article class="list-intro">
        <?= $pageContent ?>
    </article>
<?php endif; ?>

<section class="list-card-grid-wrapper">
    <div class="list-card-grid">
        <?php foreach ($items as $item): ?>
            <article>
                <?php if ($item['cover']): ?>
                    <a href="<?= htmlspecialchars($item['pdf'] ?? $item['url']) ?>">
                        <img src="<?= htmlspecialchars($item['cover']) ?>" alt="<?= htmlspecialchars($item['title']) ?>">
                    </a>
                <?php endif; ?>
                <h1>
                    <a href="<?= htmlspecialchars($item['redirect']) ?>">
                        <?= htmlspecialchars($item['title']) ?>
                    </a>
                </h1>
                <?php if (($metadata['show_date'] ?? true) && !empty($item['date'])): ?>
                    <p><?= htmlspecialchars($item['date']) ?></p>
                <?php endif; ?>
                <?php if ($item['summary']): ?>
                    <p><?= htmlspecialchars($item['summary']) ?></p>
                <?php endif; ?>
                <div class="card-actions">
                    <?php if (!empty($item['pdf'])): ?>
                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="button" download>Last ned PDF</a>
                    <?php endif; ?>
                    <?php if (!empty($item['redirect'])): ?>
                        <a href="<?= htmlspecialchars($item['redirect']) ?>" class="button">Les dybdeartikkel</a>
                    <?php else: ?>
                        <a href="<?= htmlspecialchars($item['url']) ?>" class="button">Les mer</a>
                    <?php endif; ?>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>

<style>
main > section.list-card-grid-wrapper {
  margin-top: 1.3em;

  .list-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 45%, 20rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
  }

  .list-card-grid > article {
    background-color: white;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    > :not(img, a) {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    h1 {
      margin-top: 1rem;
      font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .card-actions {
      margin-top: auto;
      display: flex;
      gap: 0.3rem;
      flex-wrap: wrap;
      padding-bottom: 1rem;

      a {
        margin-top: 1.3rem;
      }
    }
  }
}
</style>
