<div class="video-wrapper ng-star-inserted">
  <my-video-miniature>
    <div class="video-miniature">
      <my-video-thumbnail>
        <a class="video-thumbnail ng-star-inserted" href="/w/{{ $v->shortUUID }}">
          <img alt="" aria-label="{{ $v->name }}" src="https://video.076.ne.jp{{ $v->thumbnailPath }}" class="ng-star-inserted">
          <div class="video-thumbnail-actions-overlay ng-star-inserted">
            <div placement="left" container="body" class="video-thumbnail-watch-later-overlay ng-star-inserted">
              <my-global-icon iconname="clock" role="button" aria-label="「後で見る」に追加する">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
              </my-global-icon>
            </div>
          </div>
          <div class="video-thumbnail-label-overlay warning ng-star-inserted"></div>
          <div class="video-thumbnail-label-overlay danger ng-star-inserted"></div>
          <div class="video-thumbnail-duration-overlay ng-star-inserted">{{ ptDuration($v->duration) }}</div>
          <div class="play-overlay ng-star-inserted">
            <div class="icon"></div>
          </div>
          <div class="progress-bar ng-star-inserted">
            <div style="width: 100%;"></div>
          </div>
        </a>
      </my-video-thumbnail>
      <div class="video-bottom">
        <div class="video-miniature-information">
          <div class="d-flex video-miniature-meta">
            <div class="w-100 d-flex flex-column">
              <my-link tabindex="-1" class="video-miniature-name" style="max-height: 3em;">
                <a tabindex="-1" title="{{ $v->name }}" href="/w/{{ $v->shortUUID }}" class="ng-star-inserted"> {{ $v->name }} </a>
              </my-link>
              <span class="video-miniature-created-at-views">
                <my-date-toggle class="ng-star-inserted">
                  <span class="date-toggle" title="{{ date('Y/m/d', strtotime($v->createdAt)) }}"> {{ date('Y年m月d日 H:i:s T', strtotime($v->createdAt)) }} </span>
                </my-date-toggle>
                <span class="views" title=""> • 
                  <my-video-views-counter class="ng-star-inserted">
                    <span title=""> {{ $v->views }} 回視聴 </span>
                  </my-video-views-counter>
                </span>
              </span>
              @if ($res['page'] != 'channel')
                <a tabindex="-1" class="video-miniature-channel ng-star-inserted" href="/c/{{ ptFullHandle($v->channel) }}"> {{ $v->channel->displayName }} </a>
              @endif
              <div class="video-info-privacy"></div>
            </div>
          </div>
        </div>
        <div class="video-actions"></div>
      </div>
    </div>
  </my-video-miniature>
</div>
