<?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 multi-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 Works." href="<?php echo e(home_url('/')); ?>/works" class="works-root post post-works">
      <span property="name">Works</span>
    </a><meta property="position" content="2">
  </span>
</div>

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

  <div class="custom-post">
    <?php while(have_posts()): ?> <?php the_post() ?>
    <article <?php post_class('custom-post__inner') ?>>

      <div class="custom-post__meta-sp">

        <?php
          echo '<ul>';
          if ($terms = get_the_terms($post->ID, 'works_cat')) {
              foreach ( $terms as $term ) {
                echo '<li class="custom-post__cat-sp en"><a href="' . get_term_link( $term->term_id ) . '">' . $term->name . '</a></li>';
              }
          }
          echo '</ul>';
        ?>


        <ul>
          <?php
            if ($terms = get_the_terms($post_id, 'works_tag')) {
              foreach ( $terms as $term ) {
                echo '<li class="custom-post__cat-sp en">'.$term->name.'</li>';
              }
            }
          ?>
        </ul>
      </div>


      <?php if (has_post_thumbnail()){ ?>
        <div class="custom-post__thumbnail">
          <?php the_post_thumbnail(); ?>
        </div>
      <?php } ?>

      <header>

        <div class="custom-post__meta">

          <?php
            echo '<ul>';
            if ($terms = get_the_terms($post->ID, 'works_cat')) {
                foreach ( $terms as $term ) {
                  echo '<li class="custom-post__cat en"><a href="' . get_term_link( $term->term_id ) . '">' . $term->name . '</a></li>';
                }
            }
            echo '</ul>';
          ?>


          <ul>
            <?php
              if ($terms = get_the_terms($post_id, 'works_tag')) {
                foreach ( $terms as $term ) {
                  echo '<li class="custom-post__tag en">'.$term->name.'</li>';
                }
              }
            ?>
          </ul>
        </div>
        <h1 class="entry-title custom-post__title"><?php echo get_the_title(); ?></h1>

      </header>
      <div class="entry-content custom-post__content">
        <?php the_content() ?>
      </div>
      <footer>
        <?php echo wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']); ?>

      </footer>
    </article>

    <?php endwhile; ?>

    <h3 class="sns-share-title en">SHARE</h3>
    <div class="sns-share sns-share_border-right">
      <div class="sns-share__item">
        <a class="sns-share__link" href="//www.facebook.com/share.php?u=<?php the_permalink(); ?>" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="26.659" height="26.659" viewBox="0 0 26.659 26.659">
            <path id="iconmonstr-facebook-3" d="M21.105,0H5.554A5.555,5.555,0,0,0,0,5.554V21.105a5.555,5.555,0,0,0,5.554,5.554H21.105a5.554,5.554,0,0,0,5.554-5.554V5.554A5.554,5.554,0,0,0,21.105,0ZM17.773,7.776H15.636c-.683,0-1.2.28-1.2.987V10h3.332l-.264,3.332H14.44v8.886H11.108V13.33H8.886V10h2.222V7.861c0-2.246,1.182-3.418,3.844-3.418h2.82Z" fill="#4263b1"/></svg><br>
          <span class="d-none d-md-inline">Facebookで</span>シェアする
        </a>
      </div>
      <div class="sns-share__item">
        <a class="sns-share__link" href="//twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="26.659" height="26.659" viewBox="0 0 26.659 26.659">
            <path id="iconmonstr-twitter-3" d="M21.105,0H5.554A5.555,5.555,0,0,0,0,5.554V21.105a5.555,5.555,0,0,0,5.554,5.554H21.105a5.554,5.554,0,0,0,5.554-5.554V5.554A5.554,5.554,0,0,0,21.105,0Zm-.154,10.26A10.37,10.37,0,0,1,5,19.469a7.336,7.336,0,0,0,5.4-1.51A3.649,3.649,0,0,1,6.99,15.427a3.666,3.666,0,0,0,1.646-.062,3.65,3.65,0,0,1-2.925-3.621,3.628,3.628,0,0,0,1.651.457A3.653,3.653,0,0,1,6.234,7.331a10.353,10.353,0,0,0,7.516,3.81,3.648,3.648,0,0,1,6.214-3.325,7.313,7.313,0,0,0,2.317-.884,3.661,3.661,0,0,1-1.6,2.017,7.307,7.307,0,0,0,2.094-.574,7.4,7.4,0,0,1-1.821,1.885Z" fill="#279ff0"/></svg><br>
          <span class="d-none d-md-inline">Twitterで</span>つぶやく
        </a>
      </div>
    </div>

    <a class="button button_transprent-black button_arrow-left button_sp-none" href="<?php echo e(home_url('/')); ?>works"><svg xmlns="http://www.w3.org/2000/svg" width="13.712" height="13.545" viewBox="0 0 13.712 13.545"><g id="arrow" transform="translate(12.96 12.877) rotate(180)"><g id="グループ_3006" data-name="グループ 3006" transform="translate(6.126 -8.485) rotate(45)"><path id="パス_165" data-name="パス 165" d="M14.678,13.22a.542.542,0,0,1-.541-.541v-5.6h-5.6A.541.541,0,1,1,8.542,6h6.137a.542.542,0,0,1,.541.541v6.137A.542.542,0,0,1,14.678,13.22Z" transform="translate(-0.556)" fill="currentColor" stroke="currentColor" stroke-width="1"/><path id="パス_166" data-name="パス 166" d="M6.542,14.734a.542.542,0,0,1-.383-.924l7.4-7.4a.541.541,0,1,1,.765.765l-7.4,7.4A.537.537,0,0,1,6.542,14.734Z" transform="translate(0 -0.07)" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></g></svg>制作&運用実績に戻る</a>

  </div><!-- /custom-post -->

  <div class="other-posts">
    <div class="other-posts__inner">
      <h3 class="other-posts__title en">Other Works</h3>

      <div class="service-slider">
        <div class="service-slider__inner">
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">

              <?php
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                $wp_query = new WP_Query( array(
                  'post_status' => 'publish',
                  'post_type' => array('works_url', 'works'), //カスタム投稿タイプ名
                  'taxonomy' => 'works_cat',
                  'paged' => $paged,
                  'posts_per_page' => 6,
                  'orderby'     => 'date',
                  'order' => 'DESC',
                  'post__not_in' => array($post->ID)
                ) );

                if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
              ?>

              <div class="swiper-slide">
                <?php $url = get_field('works_url'); if($url): ?>
                  <a class="card card_link" href="<?php echo $url; ?>" target="_blank">
                <?php else: ?>
                  <a class="card card_link" 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>
              </div>

              <?php endwhile; endif; wp_reset_postdata(); ?>

            </div>

          </div><!-- swiper -->

        </div>
      </div><!-- service-slider -->

      <!-- Swiper JS -->
      <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper(".mySwiper", {
          slidesPerView: 1,
          spaceBetween: 30,
          breakpoints: {
            768: {
              slidesPerView: 2.3,
              spaceBetween: 30,
            },
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          // mousewheel: true,
        });
      </script>

    </div>
  </div>


<?php $__env->stopSection(); ?>

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