<?php
/**
 * The template for displaying all single posts
 *
 * @package LaraCopilot
 * @version 1.0.0
 */

get_header(); ?>

<div class="min-h-screen pt-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <?php while (have_posts()) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>
                <!-- Post Header -->
                <header class="mb-8">
                    <?php if (has_post_thumbnail()) : ?>
                        <div class="aspect-video overflow-hidden rounded-2xl mb-8">
                            <?php the_post_thumbnail('laracopilot-hero', array('class' => 'w-full h-full object-cover')); ?>
                        </div>
                    <?php endif; ?>
                    
                    <h1 class="post-title text-4xl sm:text-5xl font-bold text-white mb-4">
                        <?php the_title(); ?>
                    </h1>
                    
                    <div class="post-meta flex items-center space-x-4 text-sm">
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date(); ?></time>
                        </div>
                        <div class="flex items-center">
                            <svg class="w-4 h-4 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                            <span>By <?php the_author(); ?></span>
                        </div>
                        <?php if (has_category()) : ?>
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                </svg>
                                <span><?php the_category(', '); ?></span>
                            </div>
                        <?php endif; ?>
                    </div>
                </header>

                <!-- Post Content -->
                <div class="post-content prose prose-lg max-w-none">
                    <?php the_content(); ?>
                    
                    <?php
                    wp_link_pages(array(
                        'before' => '<div class="page-links mt-8"><span class="text-white font-semibold">Pages:</span>',
                        'after'  => '</div>',
                        'link_before' => '<span class="bg-red-600 text-white px-3 py-1 rounded mr-2">',
                        'link_after' => '</span>',
                    ));
                    ?>
                </div>
                


                <!-- Post Tags -->
                <?php if (has_tag()) : ?>
                    <div class="mt-8 pt-8 border-t border-red-500/20">
                        <h3 class="text-white font-semibold mb-4">Tags:</h3>
                        <div class="flex flex-wrap gap-2">
                            <?php the_tags('<span class="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm">', '</span><span class="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm">', '</span>'); ?>
                        </div>
                    </div>
                <?php endif; ?>

                <!-- Post Navigation -->
                <nav class="mt-12 pt-8 border-t border-red-500/20">
                    <div class="flex justify-between items-center">
                        <div class="flex-1">
                            <?php
                            $prev_post = get_previous_post();
                            if ($prev_post) :
                            ?>
                                <a href="<?php echo get_permalink($prev_post->ID); ?>" class="group flex items-center text-red-400 hover:text-red-300 transition-colors">
                                    <svg class="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                    </svg>
                                    <div>
                                        <div class="text-sm text-gray-400">Previous Post</div>
                                        <div class="font-semibold"><?php echo get_the_title($prev_post->ID); ?></div>
                                    </div>
                                </a>
                            <?php endif; ?>
                        </div>
                        
                        <div class="flex-1 text-right">
                            <?php
                            $next_post = get_next_post();
                            if ($next_post) :
                            ?>
                                <a href="<?php echo get_permalink($next_post->ID); ?>" class="group flex items-center justify-end text-red-400 hover:text-red-300 transition-colors">
                                    <div class="text-right">
                                        <div class="text-sm text-gray-400">Next Post</div>
                                        <div class="font-semibold"><?php echo get_the_title($next_post->ID); ?></div>
                                    </div>
                                    <svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </nav>
            </article>

        <?php endwhile; ?>
    </div>
</div>

<?php get_footer(); ?>