<?php $__env->startSection('content'); ?>
<div class="breadcrumbs en" typeof="BreadcrumbList" vocab="https://schema.org/">
  <span property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" title="Go to BitStar Studio." href="<?php echo e(home_url('/')); ?>" class="home">
      <span property="name">HOME</span>
    </a>
    <meta property="position" content="1">
  </span>・
  <span property="itemListElement" typeof="ListItem">
    <span property="item" typeof="WebPage" class="works-root post post-works">
      <span property="name">Works</span>
    </span>
    <meta property="position" content="2">
  </span>
</div>

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

<div class="page-content">
  <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
                                                    $link = get_term_link($category);
                                                    if (strpos($link, 'works_url') !== false) {
                                                      $replace = str_replace('works_url', 'works', $link);
                                                      echo $replace;
                                                    } else {
                                                      echo $link;
                                                    }
                                                    ?>">
              <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
            </a>
          </li>
        <?php  } ?>
        <li>
          <a class="page-content__nav-link heavy" href="<?php echo e(home_url('/')); ?>works-channel">
            <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
            YouTube Ch
          </a>
        </li>
      </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
                                                    $link = get_term_link($category);
                                                    if (strpos($link, 'works_url') !== false) {
                                                      $replace = str_replace('works_url', 'works', $link);
                                                      echo $replace;
                                                    } else {
                                                      echo $link;
                                                    }
                                                    ?>">
              <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
              <?php echo $category->name ?>
            </a>
          </li>
        <?php  } ?>
        <li>
          <a class="sp-accordion-nav__item" href="<?php echo e(home_url('/')); ?>works-channel">
            <img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">
            YouTube Ch
          </a>
        </li>
      </ul>
    </div>
  </div>

  <?php
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  $wp_query = new WP_Query(array(
    'post_status' => 'publish',
    'post_type' => array('works_channel'), //カスタム投稿タイプ名
    'taxonomy' => 'channel_cat',
    'paged' => $paged,
    'posts_per_page' => 32,
    'orderby'     => 'date',
    'order' => 'DESC'
  ));

  if ($wp_query->have_posts()) :
  ?>

    <div class="w-100">
      <div class="channel-list">
        <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
          <div class="channel-list__item">
            <a class="channel-list__link" href="<?php echo get_field('works_url'); ?>" target="_blank">
              <div class="channel-list__img-wrap">
                <?php if (has_post_thumbnail()) : ?>
                  <img width="300" height="200" class="channel-list__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 endif; ?>
              </div>
              <ul>
                <?php $post_id = get_the_ID(); ?>
                <?php
                if ($terms = get_the_terms($post_id, 'channel_cat')) {
                  foreach ($terms as $term) {
                    echo '<li class="channel-list__cat">' . $term->name . '</li>';
                  }
                }
                ?>
              </ul>
              <h3 class="channel-list__title"><?php the_title(); ?></h3>
            </a>
          </div>
      <?php endwhile;
      endif;
      wp_reset_postdata(); ?>

      <div class="channel-note en">
        <?php
        $front_page_id = get_option('page_on_front');
        the_field('channel_note', $front_page_id);
        ?>
      </div>


      <div class="pagination">
        <div class="pagination__inner en">
          <?php global $wp_rewrite;
          $paginate_base = get_pagenum_link(1);
          if (strpos($paginate_base, '?') || !$wp_rewrite->using_permalinks()) {
            $paginate_format = '';
            $paginate_base = add_query_arg('paged', '%#%');
          } else {
            $paginate_format = (substr($paginate_base, -1, 1) == '/' ? '' : '/') .
              user_trailingslashit('page/%#%/', 'paged');
            $paginate_base .= '%_%';
          }
          echo paginate_links(array(
            'base' => $paginate_base,
            'format' => $paginate_format,
            'total' => $wp_query->max_num_pages,
            'mid_size' => 1,
            'current' => ($paged ? $paged : 1),
            'prev_text' => 'Prev',
            'next_text' => 'Next',
            'type' => 'plain'
          )); ?>
        </div>
      </div>


      </div><!-- /channel-list -->
    </div>
</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 = 0;
      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(); ?>