<?php
/**
 * Template part for displaying About section
 *
 * @package Web Graphic Designer
 * @subpackage web_graphic_designer
 */
?>
<?php $web_graphic_designer_static_image = get_stylesheet_directory_uri() . '/assets/images/sliderimage.png'; ?>
<?php if( get_theme_mod( 'web_graphic_designer_about_show_hide', true) != '') { ?>
<section id="about" class="my-5">
  <div class="container">
    <div class="row">
      <?php $web_graphic_designer_about_page = array();
        $web_graphic_designer_mod = absint( get_theme_mod( 'web_graphic_designer_about_page' ));
        if ( 'page-none-selected' != $web_graphic_designer_mod ) {
          $web_graphic_designer_about_page[] = $web_graphic_designer_mod;
        }
      if( !empty($web_graphic_designer_about_page) ) :
        $web_graphic_designer_args = array(
          'post_type' => 'page',
          'post__in' => $web_graphic_designer_about_page,
          'orderby' => 'post__in'
        );
        $web_graphic_designer_query = new WP_Query( $web_graphic_designer_args );
        if ( $web_graphic_designer_query->have_posts() ) :
          while ( $web_graphic_designer_query->have_posts() ) : $web_graphic_designer_query->the_post(); ?>
            <div class="col-lg-5 col-md-4 align-self-center image-abt mb-3">
              <div class="about-block position-relative">
                  <div class="about-image1">
                      <div class="thumbnail position-relative">
                          <?php if ( has_post_thumbnail() ) : ?>
                              <?php the_post_thumbnail( 'full', array( 'alt' => esc_attr( get_the_title() ) ) ); ?>
                          <?php else : ?>
                              <img src="<?php echo esc_url( $web_graphic_designer_static_image ); ?>" alt="<?php esc_attr_e( 'Placeholder', 'web-graphic-designer' ); ?>" />
                          <?php endif; ?>
                      </div>
                  </div>
              </div>
          </div>
            <div class="col-lg-1 col-md-2 align-self-center abt-bg-img mb-3 ps-lg-3 ps-md-0">
              <div class="about-banner">
                  <?php 
                  $web_graphic_designer_image1 = get_theme_mod( 'web_graphic_designer_abt_banner_image1', '' );
                  if ( $web_graphic_designer_image1 ) : ?>
                      <img src="<?php echo esc_url( $web_graphic_designer_image1 ); ?>" alt="<?php esc_attr_e( 'About Banner', 'web-graphic-designer' ); ?>" />
                  <?php endif; ?>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 about-box align-self-center">
              <?php if( get_theme_mod('web_graphic_designer_about_tittle') != ''){ ?>
                <p class="abt-title"><?php echo esc_html(get_theme_mod('web_graphic_designer_about_tittle','')); ?></p>
              <?php }?>
              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p><?php echo wp_trim_words( get_the_content(),40 );?></p>
              <?php $web_graphic_designer_about_point = get_theme_mod('web_graphic_designer_about_points','3');
                  for ( $web_graphic_designer_m = 1; $web_graphic_designer_m <= $web_graphic_designer_about_point; $web_graphic_designer_m++ ){ ?>
                    <p><i class="fas fa-check me-2"></i><?php echo esc_html(get_theme_mod('web_graphic_designer_about_points_text'.$web_graphic_designer_m,'')); ?></p>
                <?php } ?>
            </div>
          <?php endwhile; ?>
        <?php else : ?>
          <div class="no-postfound"></div>
        <?php endif;
      endif;
      wp_reset_postdata()?>
      <div class="clearfix"></div>
    </div>
  </div>
</section>
<?php } ?>