<?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">
    <a property="item" typeof="WebPage" title="Go to Member." href="<?php echo e(home_url('/')); ?>/member">
      <span property="name">Member</span>
    </a>
    <meta property="position" content="2">
  </span>
</div>

<div class="page-header page-header_sp-border">
  <h1 class="page-header__title en">Member</h1>
  <h2 class="page-header__sub-title">制作メンバー</h2>
</div>

<div class="sp-member-menu">
  <div class="sp-member-menu__title">
    メンバー職種
  </div>
  <label class="sp-menu-select sp-member-menu__select">
    <select name="select" onChange="location.href=value;">
      <option value="#">ALL</option>
      <?php
      $categories = get_terms('member_cat');
      foreach ($categories as $category) { ?>
        <option value="<?php echo get_term_link($category); ?>">
          <?php echo $category->name ?>
        </option>
      <?php  } ?>
    </select>
  </label>
</div>

<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 en heavy" href="<?php echo e(home_url('/')); ?>member"><img class="page-content__nav-icon" src="<?= App\asset_path('images/icon-cat.svg'); ?>">All</a></li>
        <?php
        $categories = get_terms('member_cat');
        foreach ($categories as $category) { ?>
          <li>
            <a class="page-content__nav-link en" 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
    $args = array(
      'post_type' => 'member',
      'post_status' => 'publish',
      'posts_per_page' => -1,
    );
    $the_query = new WP_Query($args);
    ?>

    <?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>

        <a class="cards__item card card_link card_radius card_member" href="<?php the_permalink(); ?>">
          <?php if (has_post_thumbnail()) : ?>
            <figure class="card__img-wrap">
              <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'); ?>">
            </figure>
          <?php endif; ?>
          <div class="card__body">
            <p class="card__text"><?php the_title(); ?></p>
            <div class="card__meta">
              <?php
              $positions = the_field('position');
              if ($positions) {
                echo '<ul>';
                foreach ($positions as $position) {
                  echo '<li class="card__cat en">' . $position->name . '</li>';
                }
                echo '</ul>';
              }
              ?>
            </div>
          </div>
        </a>


    <?php endwhile;
    endif; ?>

  </div><!-- /cards -->
</div>

<?php wp_reset_postdata(); ?>

<div class="sp-cta">
  <p class="sp-cta__text">BitStar Studioまでお気軽に<br>ご連絡ください！</p>
  <div class="sp-cta__link-unit">
    <a class="sp-cta__btn sp-cta__btn_purple" href="<?php echo e(home_url('/#contact')); ?>">まずは無料相談</a>
    <a class="sp-cta__btn sp-cta__btn_lime" href="https://bitstar.tokyo/request/" target="_blank">資料請求</a>
  </div>
</div>

<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(".footer-cta").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(); ?>