<?php $__env->startSection('content'); ?>
<div class="breadcrumbs en" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

<div class="page-header">
  <h1 class="page-header__title en">Works</h1>
  <h2 class="page-header__sub-title">制作&運用実績</h2>
</div>

<div class="page-content">
  <div class="bg-text en">Works Works Works</div>
  <div class="page-content__nav-wrap">
    <div class="page-content__nav" id="fix-element">
      <h3 class="page-content__nav-title"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat-title.svg'); ?>">カテゴリー</h3>
      <ul class="page-content__nav-cat-list">
        <li><a class="page-content__nav-link" href="<?php echo e(home_url('/')); ?>works"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">All</a></li>

        <?php
          $categories = get_terms('works_cat');
          foreach($categories as $category) { ?>
            <li>
              <a class="page-content__nav-link" href="<?php echo get_term_link($category) ?>">
                <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
              </a>
            </li>
        <?php  } ?>

      </ul>
    </div>
  </div>

  <div class="sp-accordion-nav">
    <a class="sp-accordion-nav__title" data-toggle="collapse" data-target="#sp-cat-list" aria-expand="false" aria-controls="sp-cat-list"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat-title.svg'); ?>">カテゴリー</a>
    <div class="collapse" id="sp-cat-list">
      <ul>
        <?php
          $categories = get_terms('works_cat');
          foreach($categories as $category) { ?>
            <li>
              <a class="sp-accordion-nav__item" href="<?php echo get_term_link($category) ?>">
                <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
              </a>
            </li>
        <?php  } ?>
      </ul>
    </div>
  </div>

  <div class="page-content__cards cards">
    <?php if(have_posts()): while(have_posts()): the_post(); ?>

    <?php $url = get_field('works_url'); if($url): ?>
      <a class="cards__item card card_link card_radius" href="<?php echo $url; ?>" target="_blank">
    <?php else: ?>
      <a class="cards__item card card_link card_radius" href="<?php the_permalink(); ?>">
    <?php endif; ?>
      <figure class="card__img-wrap">
      <?php if( has_post_thumbnail() ): ?>
        <img class="card__img lazyload" src="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ); ?>" data-src="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'large' ); ?>">
      <?php elseif( get_field('works_url') ): ?>
      <?php
        $works_url = get_field('works_url');
        if (preg_match('/youtu/',$works_url)) {
          $data = $youtube_url = get_field('works_url');
          $data = htmlspecialchars($data, ENT_QUOTES);
          if (strpos($youtube_url, "watch") != false){
            $youtube_url = substr($youtube_url, (strpos($youtube_url, "=")+1));
          }else{
            $youtube_url = substr($youtube_url, (strpos($youtube_url, "youtu.be/")+9));
          }

          $src = "https://img.youtube.com/vi/${youtube_url}/maxresdefault.jpg";

          echo '<img class="card__img lazyload" data-src="'.$src.'">';

        } else { ?>
          <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
        <?php
        }
        ?>
      <?php else: ?>
        <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
      <?php endif; ?>
      </figure>
      <div class="card__body">
        <div class="card__meta">
          <ul>
            <?php $post_id = get_the_ID(); ?>
            <?php
              if ($terms = get_the_terms($post_id, 'works_cat')) {
                foreach ( $terms as $term ) {
                  echo '<li class="card__cat en">'.$term->name.'</li>';
                }
              }
            ?>
          </ul>
          <ul>
            <?php $post_id = get_the_ID(); ?>
            <?php
              if ($terms = get_the_terms($post_id, 'works_tag')) {
                foreach ( $terms as $term ) {
                  echo '<li class="card__cat en">'.$term->name.'</li>';
                }
              }
            ?>
          </ul>
        </div>
        <p class="card__text"><?php the_title(); ?></p>
      </div>
    </a>

    <?php endwhile; endif; ?>

    <div class="pagination">
      <div class="pagination__inner en">
        <?php global
        $wp_query;
        $big = 9999999999;
        $arg = array(
          'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
          'current' => max( 1, get_query_var('paged') ),
          'total'   => $wp_query->max_num_pages,
          'mid_size' => 1,
          'prev_text' => 'Prev',
          'next_text' => 'Next',
          'type' => 'plain',
        );
        echo paginate_links($arg);
        ?>
      </div>
    </div>
  </div><!-- /cards -->

</div>


<?php wp_reset_postdata(); ?>


<script>
jQuery(function(){
  jQuery(window).on('scroll resize', function() {
    let scroll = jQuery(document).scrollTop();
    let contenttop = jQuery(".page-content").offset().top;
    let sideheight = jQuery("#fix-element").outerHeight();
    let sidemargintop = 40;
    let sidemarginbottom = 90;
    let footertop = jQuery(".pagination").offset().top;

    if (scroll > (footertop - sidemarginbottom - sidemargintop - sideheight)) {
      // フッターにあたった場合
      jQuery("#fix-element").css({
        'position': 'absolute',
        'top': 'auto',
        'bottom': sidemarginbottom + 'px',
      });
    } else if (scroll > (contenttop - sidemargintop)) {
      // 追従時
      jQuery("#fix-element").css({
        'position': 'fixed',
        'top': sidemargintop + 'px',
        'bottom': 'auto',
      });
    } else {
      // 追従するまでスクロールされてないとき
      jQuery("#fix-element").css({
        'position': 'static',
        'top': 'auto',
        'bottom': 'auto',
      });
    }
  });
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>