<?php get_header(); ?>

<main class="max-w-7xl mx-auto px-4 py-8 flex flex-col <?php echo esc_attr(kumibox_sidebar_class()); ?> gap-8">
    <section class="lg:w-2/3">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                
                <div class="mb-3">
                    <span class="bg-[var(--color-primary)] text-white text-[10px] font-bold uppercase px-2 py-1 shadow-sm">
                        <?php $category = get_the_category(); if($category) echo esc_html($category[0]->cat_name); ?>
                    </span>
                </div>
                
                <h1 class="text-3xl md:text-5xl font-black mb-4 text-[var(--text-main)] leading-tight">
                    <?php the_title(); ?>
                </h1>
                
                <div class="flex flex-wrap items-center text-xs text-gray-500 uppercase font-bold tracking-wider mb-6 border-b-2 border-black dark:border-white pb-4 gap-4">
                    <?php if (get_theme_mod('show_meta_author', true)) : ?>
                        <span><i class="far fa-user text-[var(--color-primary)]"></i> <?php the_author(); ?></span>
                    <?php endif; ?>
                    
                    <?php if (get_theme_mod('show_meta_date', true)) : ?>
                        <span><i class="far fa-clock text-[var(--color-primary)]"></i> <?php echo get_the_date(); ?></span>
                    <?php endif; ?>
                    
                    <?php if (get_theme_mod('show_meta_comments', true)) : ?>
                        <span><i class="far fa-comments text-[var(--color-primary)]"></i> <?php echo esc_html(get_comments_number()); ?> komentarzy</span>
                    <?php endif; ?>
                </div>
                
                <?php if (has_post_thumbnail()) : ?>
                    <div class="mb-8 overflow-hidden shadow-sm">
                        <?php the_post_thumbnail('full', array('class' => 'w-full h-auto object-cover')); ?>
                    </div>
                <?php endif; ?>
                
                <div class="entry-content prose prose-lg dark:prose-invert max-w-none font-sans leading-relaxed text-[var(--text-main)]">
                    <?php the_content(); ?>
                </div>
                
                <div class="mt-12 pt-6 border-t border-[var(--border-custom)]">
                    <div class="flex flex-wrap gap-2 text-[var(--text-main)]">
                        <?php the_tags('<span class="text-xs font-bold mr-2 uppercase opacity-70">Tagi:</span> ', ' '); ?>
                    </div>
                </div>
                
            </article>
            
            <div class="mt-8 pt-8 border-t border-[var(--border-custom)] flex justify-between font-bold text-[var(--color-primary)] text-sm uppercase tracking-wide">
                <div><?php previous_post_link('%link', '<i class="fas fa-angle-double-left"></i> Poprzedni'); ?></div>
                <div><?php next_post_link('%link', 'Następny <i class="fas fa-angle-double-right"></i>'); ?></div>
            </div>

            <?php if (comments_open() || get_comments_number()) : comments_template(); endif; ?>

        <?php endwhile; endif; ?>
    </section>

    <aside class="lg:w-1/3 space-y-8">
        <?php if (is_active_sidebar('main-sidebar')) : dynamic_sidebar('main-sidebar'); endif; ?>
    </aside>
</main>

<?php get_footer(); ?>