<?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);
	$category = get_the_category();
	$parent = get_cat_name($category[0]->category_parent);
	
	// 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 );
   
    $subtitulo = get_term_meta( $cat_id , 'category_subtitle', true );
	$subtitulo = get_term_meta($cat_id, 'category_subtitle', true);

    // color texto titulos
    $title_color = get_term_meta($cat_id, 'color_titulo_categoria', true);
    // color texto subtitulos
    $subtitle_color = get_term_meta($cat_id, 'color_descripcion', true);
    // color background banner
    $banner_category_color = get_term_meta($cat_id, 'color_banner_categoria', true);


?> <style>
        <?php             
        /*Estos estilos se dejan para la categoria de banners ya que son dinamicos*/
            if(($category_image)||($category_color)): ?>
                #category-header .cat-description, #post-header .cat-description {
                    padding: 3% 10%;
                    margin: auto;
                }
                .container-header-one {
                    background-color: <?php echo $banner_category_color; ?>; 
                    background-size: inherit;
                    width: 25%;
                    float:left;    
                    padding: 5% 0 0 0;    
                    height: 550px;
                }
                #category-header h1.cat-title {            
                    color: <?php echo $title_color ?>;
                }
                #category-header {
                    background-image: inherit!important;
                    background-size: cover;
                }
                .container-header-two {
                    background-image: url(<?php echo $category_image[0]; ?>);
                    background-size: cover;
                    width: 75%;
                    float:left;
                    display:block;
                    background-repeat: no-repeat;    
                    height: 550px;
                }
                .cat-description p{
                    color: <?php echo $subtitle_color; ?>;                
                }
                @media screen and (max-width: 1366px){
                    #category-header .cat-title {
                        padding: 7%!important;
                    }
                    .container-header-one {    
                        padding: 3% 0;    
                        height: 422px;
                    }
                    .container-header-two {  
                        height: 422px;
                    }
                    body.archive.category #category-header {
                        height: 414px;
                    }
               }
               @media screen and (max-width:800px) {
                    .container-header-one {
                        width: 100%;
                    }
                    .container-header-two {
                        display:none;
                    }
                }
            <?php endif; ?>
    </style>
<main class="embajadores-in">
<div id="category-header" style="background-image:url('<?php echo $category_image[0]; ?>')">
		<div class="container-header-one">
                       <h1 class="cat-title"><?php echo $subtitulo; ?></h1>
                   <?php $cat_desc = category_description(get_cat_ID(single_cat_title('', false))); ?>
                   <?php
                   if ($cat_desc) {
                   ?>
                       <div class="cat-description"><?php echo $cat_desc; ?></div>
                   <?php } ?>
               </div> 
               <div class="container-header-two"></div>        
	</div>
	<section>

		<div id="content-wrapper" class="l-container l-flex">
			<div class="content-box">	
				<section id="posts" class="l-flex country_brand">
			<?php
			$wp_query = new WP_Query( array( 'cat' => $cat , 'posts_per_page' => '12' , 'paged' => $paged)  );
			while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
			<?php
				$url_exploded = explode('/', parse_url(get_the_permalink(), PHP_URL_PATH));
				$parent_category = 'category-'.$url_exploded[1];
			?>
				<article class="category-  post type-post status-publish category-actualidad  format-standard has-post-thumbnail hentry category-regiones-del-pais category-turismo category-turismo-por-regiones tag-colombia tag-regiones-de-colombia tag-turismo tag-viajes" >
					<figure class="post-img">

						<a href="<?php the_permalink(); ?>">
						<?php 
							$url = wp_get_attachment_url( get_post_thumbnail_id($wp_query->posts['ID']), 'thumbnail' ); 
							$alt = $wp_query->posts['post_title'];
							$title = $wp_query->posts['post_title']; ?>
							<img src="<?php echo $url ?>" />
							<?php						
								if(!empty($url)){
								?>
								<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
							<?php } ?>						
						</a>
					</figure>
					<div class="post-category">
						<?php  if(get_field( "profession")){?>
						<ul class="post-categories">
							<li><a href="<?php the_permalink(); ?>"><?php  echo  get_field( "profession"); ?></a></li>
						</ul>
						<?php } ?>					
					</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>Ver más</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 hey" type="button" data-current-page="<?php echo $paged; ?>" data-total-pages="<?php echo $wp_query->max_num_pages; ?>">Cargar más</button>
					</div>
					<?php } ?>
					</section>

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