<?php get_header(); ?>

<?php 
	global $wp_query, $paged; 

	$cat = get_cat_ID(single_cat_title('', false));
	$cat_id = get_cat_ID(single_cat_title('', false));
	$real_id = get_cat_ID($cat_id);
	
	// Acá definimos $subtitulo, $category_color y $category_image para usarlos donde sea necesario
	$images = get_option('taxonomy_image_plugin'); // get the taxonomy images array
	if( array_key_exists( $cat_id, $images ) ) { // check if term has an image
        $category_image = wp_get_attachment_image_src( $images[$cat_id], 'full' ); // if it does, echo that image
    }
    $category_color = get_term_meta( $cat_id , 'category_color', true );
    $category_color_rgb = array(hexdec($category_color[1].$category_color[2]), hexdec($category_color[3].$category_color[4]), hexdec($category_color[5].$category_color[6]));
    $subtitulo = get_term_meta( $cat_id , 'category_subtitle', true );
?>
<?php if(($category_image)||($category_color)): ?>
<style>
	<?php if($category_image): ?>
		#category-header {
			background-image: url(<?php echo $category_image[0]; ?>);
			background-size: cover;
		}
		<?php if($category_color): ?>
			#posts .post-categories li {
				background-color: <?php echo $category_color; ?>;
			}
			#posts .post-excerpt {
				background-color: rgba(<?php echo $category_color_rgb[0]; ?>,<?php echo $category_color_rgb[1]; ?>,<?php echo $category_color_rgb[2]; ?>,0.9);
			}
		<?php endif; ?>
	<?php endif; ?>
</style>
<?php endif; ?>

<main role="main" class="l-flex">
	<div id="category-header">
		<div class="l-container l-flex">
			<?php
				$cat_desc = category_description(get_cat_ID(single_cat_title('', false)));
			?>
			<div class="cat-header-container">
				<?php if(is_category()): ?>
				<?php 
					if( $subtitulo ){
				?>
					<h2 class="cat-name"><?php single_cat_title(); ?></h2>
					<h1 class="cat-title"><?php echo $subtitulo; ?></h1> 
				<?php
					}
					else{
				?>
					<h1 class="cat-title"><?php single_cat_title(); ?></h1>
				<?php } ?>
				<?php 
					if( $cat_desc ){
				?>
					<div class="cat-description"><?php echo $cat_desc; ?></div>
				<?php } ?>
				<?php elseif(is_tag()): ?>
					<h2 class="cat-name">Tag</h2>
					<h1 class="cat-title"><?php single_cat_title(); ?></h1> 
				<?php endif; ?>
			</div>
		</div>
	</div>
	<div id="content-wrapper" class="l-container l-flex">
		<section id="posts" class="l-flex">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php
					$url_exploded = explode('/', parse_url(get_the_permalink(), PHP_URL_PATH));
			    	$parent_category = 'category-'.$url_exploded[1];
				?>
				<article <?php post_class($parent_category); ?> id="post-<?php the_ID(); ?>">
					<figure class="post-img">
						<a href="<?php the_permalink(); ?>">
						<?php
							if(has_post_thumbnail()){
								$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->id), 'post-thumbnail');
								if($image[1] == $image[2]){
										the_post_thumbnail('post-thumbnail', array('class' => 'sq'));
								}
								else{
									the_post_thumbnail();
								}
							}
							else{
								$thumb = get_field('thumb_post');
						?>
								<img class="sq" src="<?php echo $thumb['sizes']['medium']; ?>" alt="<?php echo $thumb['alt']; ?>" title="<?php echo $thumb['title']; ?>" />
						<?php
							}
						?>
						</a>
					</figure>
					<div class="post-category">
						<?php the_category(); ?>
					</div>
					<div class="post-title">
						<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
					</div>
					<a href="<?php the_permalink(); ?>">
						<div class="post-excerpt">
							<div class="excerpt-wrapper">
								<?php the_excerpt(); ?>
								<span class="read-more"><i class="icon-read-more"></i><br/><?php _e('Leer', 'colombia'); ?></span>
							</div>
						</div>
					</a>
				</article>

			<?php endwhile; ?>

			<?php if($wp_query->max_num_pages > 1){ ?>
				<div id="pagination">
					<button id="load-more" class="btn-secondary" type="button" data-current-page="<?php echo $paged; ?>" data-total-pages="<?php echo $wp_query->max_num_pages; ?>"><?php _e('Cargar más', 'colombia'); ?></button>
				</div>
			<?php } ?>
		</section>

		<?php get_sidebar(); ?>
	</div>
</main>

<?php get_footer(); ?>