<my-video-comments class="border-top">
  <div>
    <div class="title-block">
      <h2 class="title-page title-page-single"> {{ $res['comment']->totalNotDeletedComments }} コメント </h2>
      <my-feed>
        <div class="feed">
          <my-global-icon role="button" aria-label="Open syndication dropdown" placement="bottom left auto" iconname="syndication" class="icon-syndication ng-star-inserted">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
          </my-global-icon>
        </div>
      </my-feed>
      <!--div class="d-inline-block ml-4 dropdown-root dropdown">
        <button id="dropdown-sort-comments" class="dropdown-toggle btn btn-sm btn-outline-secondary" aria-expanded="false">並べ替え</button>
        <div aria-labelledby="dropdown-sort-comments" x-placement="bottom-left" class="dropdown-menu">
          <button class="dropdown-item">新しい順（デフォルト）</button>
          <button class="dropdown-item">多かった順</button>
        </div>
      </div-->
    </div>
    <my-video-comment-add class="ng-star-inserted">
      <form novalidate="" class="ng-untouched ng-pristine ng-invalid">
        <div class="avatar-and-textarea">
          <my-actor-avatar size="25">
            <img class="account avatar avatar-25 ng-star-inserted" src="https://video.076.ne.jp/lazy-static/avatars/aa9883c7-d4d0-48c3-8e3a-72a9f2d96784.png" alt="アカウントのアバター">
          </my-actor-avatar>
          <div class="form-group">
            <textarea placeholder="コメントを入力..." myautoresize="" formcontrolname="text" rows="1" class="ng-untouched ng-pristine ng-invalid" style="overflow: hidden; height: 32px;"></textarea>
          </div>
        </div>
        <div class="comment-buttons"></div>
      </form>
    </my-video-comment-add>
    @if (count($res['comment']->data) == 0)
      <div class="ng-star-inserted">コメントがありません。</div>
    @else
      @foreach ($res['comment']->data as $k => $v)
        @if (!$v->isDeleted)
          <div class="comment-threads ng-star-inserted">
            <div>
              <div id="highlighted-comment" class="anchor"></div>
              <my-video-comment class="ng-star-inserted">
                <div class="root-comment ng-star-inserted">
                  <div class="left">

                    <my-actor-avatar class="ng-star-inserted">
                      <a target="_blank" rel="noopener noreferrer" href="{{ $v->account->url }}" title="{{ $v->account->name }} (アカウントページへ) " class="ng-star-inserted">
                        <img class="account avatar ng-star-inserted" src="{{ ptAvatar($v->account) }}" alt="アカウントのアバター">
                      </a>
                    </my-actor-avatar>

                    <div class="vertical-border"></div>
                  </div>
                  <div class="right mb-3">
                    <div class="comment">
                      @php
                        $comsrc = ptComeSrc($v->src);
                      @endphp
                      <div class="highlighted-comment ng-star-inserted" style="background-color: {{ $comsrc->bg }}; color: {{ $comsrc->fg }};">{{ $comsrc->tx }}</div>
                      <div class="comment-account-date ng-star-inserted">
                        <div class="comment-account">
                          @if ($v->src != 'TS' && $v->src != 'PT')
                            <a href="{{ $v->account->url }}">
                              <span class="comment-account-name"> {{ $v->account->displayName }} </span>
                            </a>
                          @elseif ($v->src == 'TS')
                            @if (!is_null($v->account->user_id))
                              <a href="{{ $v->account->url }}" style="{{ $v->account->nameStyle }}">
                            @else
                              <span style="font-size: 16px; font-style: normal; color: #20ec77;">
                            @endif
                            {{ $v->account->displayName }}
                            @if (!is_null($v->account->user_id))
                              </a>
                            @else
                              </span>
                            @endif
                          @else
                            <a href="/a/{{ ptFullHandle($v->account) }}">
                              <span class="comment-account-name"> {{ $v->account->displayName }} </span>
                              <span class="comment-account-fid ml-1">{{ ptFullHandle($v->account) }}</span>
                            </a>
                          @endif
                        </div>
                        <a class="comment-date" title="{{ date('Y/m/d', strtotime($v->createdAt)) }}" href="/w/{{ request()->route('id') }}#threadId={{ $v->threadId }}"> 
                          {{ date('Y年m月d日 H:i:s T', strtotime($v->createdAt)) }}
                        </a>
                      </div>
                      <div mytimestamproutetransformer="" class="comment-html ng-star-inserted">
                        <?php echo $v->text; ?>
                      </div>
                      @if ($v->src == 'TS' || $v->src == 'PT')
                        <div class="comment-actions ng-star-inserted">
                          <div tabindex="0" class="comment-action-reply">返事</div>
                        </div>
                      @endif
                      <div class="ng-star-inserted"></div>
                    </div>
                  </div>
                </div>
                <div class="ng-star-inserted"></div>
              </my-video-comment>
            </div>
          </div>
        @endif
      @endforeach
    @endif
    <div class="comment-threads ng-star-inserted">
      <div>
        <div id="highlighted-comment" class="anchor"></div>
      </div>
    </div>
  </div>
</my-video-comments>
