<?php
/**
 * The default archive template for blog posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 */

get_header(); ?>

<style>
/* Container for content alignment */
.blog-archive__container {
    max-width: 1200px; /* Match header width */
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Blog Archive Component */
.blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 2rem;
    width: 100%;
}

/* Blog Card Component */
.blog-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.blog-card__media {
    position: relative;
    width: 100%;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.blog-card__image-container {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    overflow: hidden;
}

.blog-card__image-placeholder {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: blog-archive-shimmer 1.5s linear infinite;
}

.blog-card__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.blog-card__content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-card__title {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.blog-card__date {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.75rem;
}

.blog-card__excerpt {
    color: #666;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

@keyframes blog-archive-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .blog-archive__container {
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .blog-archive__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-archive__grid {
        grid-template-columns: 1fr;
    }
    
    .blog-card__image-container {
        height: 250px;
    }

    .blog-archive__container {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .blog-card__content {
        padding: 1rem;
    }
    
    .blog-card__title {
        font-size: 1.125rem;
    }
    
    .blog-card__image-container {
        height: 200px;
    }
}
</style>

<main id="post-<?php the_ID(); ?>" <?php post_class('main ucla-grid'); ?>>
    <div class="blog-archive__container">
        <h1 class="bp__page-title">CSRC Post</h1>
        <div class="blog-archive__grid">
            <?php
            /* Start the Loop */
            while (have_posts()) :
                the_post();
                $date_string = get_field('publish_date');
                $date = new DateTime(get_field('publish_date'));
                
                // Define fallback image
                $fallback_image = 'https://dev-chicano-studies.pantheonsite.io/wp-content/uploads/2024/07/csrc-tortilla-logo-min.jpeg';

                // Get featured image details
                $has_thumbnail = has_post_thumbnail();
                $image_id = get_post_thumbnail_id();
                $image_url = $has_thumbnail ? get_the_post_thumbnail_url(get_the_ID(), 'large') : $fallback_image;
                $image_alt = $has_thumbnail ? get_post_meta($image_id, '_wp_attachment_image_alt', true) : 'CSRC Logo';
                ?>
                
                <article class="blog-card">
                    <div class="blog-card__media">
                        <a href="<?php the_permalink(); ?>" class="blog-card__link">
                            <div class="blog-card__image-container">
                                <div class="blog-card__image-placeholder"></div>
                                <img 
                                    src="<?php echo esc_url($image_url); ?>"
                                    alt="<?php echo esc_attr($image_alt); ?>"
                                    class="blog-card__image"
                                    loading="lazy"
                                    style="opacity: 0"
                                    onload="handleBlogImageLoad(this)"
                                    onerror="handleBlogImageError(this)"
                                >
                            </div>
                        </a>
                    </div>
                    <div class="blog-card__content">
                        <h2 class="blog-card__title">
                            <a href="<?php the_permalink(); ?>" class="blog-card__link">
                                <?php the_title(); ?>
                            </a>
                        </h2>
                        <time class="blog-card__date">
                            <?php echo $date->format('l, F j, Y'); ?>
                        </time>
                        <div class="blog-card__excerpt">
                            <?php echo wp_trim_words(get_the_excerpt(), 20); ?>
                        </div>
                    </div>
                </article>
            <?php endwhile; ?>
        </div>
    </div>
</main><!-- #post-<?php the_ID(); ?> -->

<script>
function handleBlogImageLoad(img) {
    img.style.opacity = '1';
    const placeholder = img.previousElementSibling;
    if (placeholder) {
        placeholder.style.opacity = '0';
    }
}

function handleBlogImageError(img) {
    img.onerror = null;
    const container = img.closest('.blog-card__image-container');
    container.classList.add('blog-card__image-container--error');
    container.setAttribute('data-title', 'Image unavailable');
    img.style.opacity = '0';
}
</script>

<?php get_footer(); ?>