<?php get_header(); ?>

<div class="mx-auto post-header py-16 relative lg:py-28"></div>
<div class="bg-gray-100">
    <div class="max-w-7xl mx-auto md:flex">
        <div class="flex flex-1 flex-col justify-center max-w-7xl mx-auto p-4 space-y-2">
            <?php $breadcrumbs = PG_Helper_v2::getBreadcrumbs( 'categories', true, 'Home'); ?>
            <?php if( !empty( $breadcrumbs ) ) : ?>
                <nav class="bg-blue-500 flex mb-4 px-4 py-2 rounded-md text-white" aria-label="Breadcrumb">
                    <div role="list" class="flex">
                        <?php $breadcrumb = $breadcrumbs[ 0 ]; ?>
                        <a href="<?php echo esc_url( $breadcrumb[ 'link' ] ); ?>"><svg class="h-5 w-5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd"/>
                            </svg> </a>
                        <?php for( $breadcrumbs_i = 1; $breadcrumbs_i < count( $breadcrumbs ); $breadcrumbs_i++) : ?>
                            <?php $breadcrumb = $breadcrumbs[ $breadcrumbs_i ]; ?>
                            <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-5">
                                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
                                </svg><a href="<?php echo esc_url( $breadcrumb[ 'link' ] ); ?>" class="font-medium min-w-max text-sm"><?php echo $breadcrumb[ 'name' ]; ?></a></span>
                        <?php endfor; ?>
                    </div>
                </nav>
            <?php endif; ?>
            <h1 class="font-bold text-2xl text-left tracking-tight md:text-4xl lg:text-5xl"><?php the_title(); ?></h1>
            <?php $terms = get_the_terms( get_the_ID(), 'category' ) ?>
            <?php if( !empty( $terms ) ) : ?>
                <?php foreach( $terms as $term_i => $term ) : ?>
                    <?php if( $term_i == 0 ) : ?>
                        <a class="font-medium text-base text-purple-900" href="<?php echo esc_url( get_term_link( $term, 'category' ) ) ?>"><?php echo $term->name; ?></a>
                    <?php endif; ?>
                <?php endforeach; ?>
            <?php endif; ?>
            <?php if ( has_excerpt() ) : ?>
                <?php the_excerpt( ); ?>
            <?php endif; ?>
            <h3 class="font-normal text-purple-900 text-xs"><?php the_time( get_option( 'date_format' ) ); ?></h3>
        </div>
        <div class="flex flex-1 items-center justify-end md:my-4">
            <?php echo PG_Image::getPostImage( null, 'full', array(
                    'class' => 'max-h-full object-center object-cover',
                    'sizes' => '(max-width: 768px) 100vw, (max-width: 1024px) 22vw, (max-width: 1280px) 29vw, 370px'
            ), 'both', null ) ?>
        </div>
    </div>
</div>
<div class="max-w-7xl mx-auto pb-16 px-2 lg:grid lg:grid-cols-4">
    <div class="bg-gray-200 max-w-7xl mb-12 mt-4 overflow-hidden pb-8 relative lg:col-span-3 lg:px-0">
        <div class="min-w-full mt-4 px-4 prose">
            <?php the_content(); ?>
        </div>
    </div>
    <div>
        <?php if ( is_active_sidebar( 'archive' ) ) : ?>
            <div class="mb-28 sticky top-8 lg:mb-0 lg:pl-4">
                <?php dynamic_sidebar( 'archive' ); ?>
            </div>
        <?php endif; ?>
    </div>
</div>
<section class="bg-white dark:bg-gray-900 py-8 lg:py-16 antialiased"></section>            

<?php get_footer(); ?>