<?php
/**
 * Blog-Index (Beitragsseite).
 *
 * Wird genutzt, wenn unter "Einstellungen → Lesen" eine eigene Seite als
 * Beitragsseite gesetzt ist (die Startseite bleibt front-page.php).
 * Zeigt den neuesten Beitrag hervorgehoben und darunter ein Karten-Raster.
 *
 * @package drogentest-online
 */

get_header();

$blog_page_id = (int) get_option( 'page_for_posts' );
$intro_title  = $blog_page_id ? get_the_title( $blog_page_id ) : __( 'Ratgeber &amp; News', 'drogentest-online' );
?>

<header class="dgt-pagehead">
	<?php dgt_breadcrumb(); ?>
	<p class="dgt-eyebrow">Aus dem Magazin</p>
	<h1 class="dgt-pagehead-title"><?php echo wp_kses_post( $intro_title ); ?></h1>
	<p class="dgt-pagehead-lead">
		Wissenswertes rund um Drogentests, Aufklärung und Gesundheit &ndash;
		verständlich erklärt und regelmäßig aktualisiert.
	</p>
</header>

<section class="dgt-content">
	<?php if ( have_posts() ) : ?>

		<?php
		$is_first      = ( ! is_paged() );
		$grid_started  = false;
		while ( have_posts() ) :
			the_post();

			// Erster Beitrag auf Seite 1: großflächig hervorheben.
			if ( $is_first ) :
				$is_first = false;
				?>
				<article <?php post_class( 'dgt-post-feature' ); ?>>
					<?php if ( has_post_thumbnail() ) : ?>
						<a class="dgt-card-media" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
							<?php the_post_thumbnail( 'large', array( 'alt' => esc_attr( get_the_title() ) ) ); ?>
						</a>
					<?php else : ?>
						<span class="dgt-card-media dgt-card-media--empty">Drogentest&nbsp;Online</span>
					<?php endif; ?>
					<div class="dgt-card-body">
						<?php dgt_post_meta(); ?>
						<h2 class="dgt-card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
						<p class="dgt-card-excerpt"><?php echo esc_html( has_excerpt() ? wp_trim_words( get_the_excerpt(), 64 ) : wp_trim_words( wp_strip_all_tags( get_the_content( '' ) ), 64 ) ); ?></p>
						<a class="dgt-btn dgt-btn-outline dgt-card-btn" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( get_the_title() ); ?>">
							Weiterlesen
							<svg width="16" height="12" viewBox="0 0 18 14" aria-hidden="true"><path d="M1 7h15m0 0-5.5-5.5M16 7l-5.5 5.5" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</a>
					</div>
				</article>
				<?php
				continue;
			endif;

			// Übrige Beiträge im Raster.
			if ( ! $grid_started ) {
				echo '<div class="row g-4 dgt-post-grid">';
				$grid_started = true;
			}
			?>
			<div class="col-sm-6 col-md-4">
				<article <?php post_class( 'dgt-post-card' ); ?>>
					<?php if ( has_post_thumbnail() ) : ?>
						<a class="dgt-card-media" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
							<?php the_post_thumbnail( 'dgt-card', array( 'alt' => esc_attr( get_the_title() ) ) ); ?>
						</a>
					<?php else : ?>
						<span class="dgt-card-media dgt-card-media--empty">Drogentest&nbsp;Online</span>
					<?php endif; ?>
					<div class="dgt-card-body">
						<?php dgt_post_meta(); ?>
						<h2 class="dgt-card-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
						<p class="dgt-card-excerpt"><?php echo esc_html( wp_trim_words( get_the_excerpt(), 20 ) ); ?></p>
						<a class="dgt-btn dgt-btn-outline dgt-card-btn" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( get_the_title() ); ?>">
							Weiterlesen
							<svg width="16" height="12" viewBox="0 0 18 14" aria-hidden="true"><path d="M1 7h15m0 0-5.5-5.5M16 7l-5.5 5.5" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
						</a>
					</div>
				</article>
			</div>
			<?php
		endwhile;

		if ( $grid_started ) {
			echo '</div>';
		}

		dgt_pagination();
		?>

	<?php else : ?>

		<div class="dgt-empty">
			<h2 class="dgt-empty-title">Noch keine Beiträge</h2>
			<p class="dgt-empty-text">Hier erscheinen bald hilfreiche Artikel rund um Drogentests und Aufklärung.</p>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="btn dgt-btn dgt-btn-primary">Zur Startseite</a>
		</div>

	<?php endif; ?>
</section>

<?php
get_footer();