<my-user-notifications>
  <div class="notifications">
    @foreach ($res['notification']->data as $n)
      <div class="notification{{ !$n->read ? ' unread' : '' }} ng-star-inserted">
        @if (isset($n->comment))
          @include('layout.component.my-account.notifications.comment')
        @elseif (isset($n->account))
          @include('layout.component.my-account.notifications.account')
        @elseif (isset($n->actorFollow))
          @include('layout.component.my-account.notifications.actorfollow')
        @elseif (isset($n->video))
          @include('layout.component.my-account.notifications.video')
        @elseif (isset($n->videoAbuse))
          @include('layout.component.my-account.notifications.account')
        @elseif (isset($n->videoBlacklist))
          @include('layout.component.my-account.notifications.blacklist')
        @elseif (isset($n->videoImport))
          @include('layout.component.my-account.notifications.import')
        @elseif (isset($n->plugin))
          @include('layout.component.my-account.notifications.plugin')
        @endif
        <form action="/my-account/notifications/read" method="post">
          @csrf
          <input type="hidden" name="id" value="{{ $n->id }}" />
          <button style="background-color: var(--mainHoverColor); color: var(--whiteColor);" class="btn ml-auto"{{ $n->read ? ' disabled' : '' }}>
            <span class="ng-star-inserted">既読</span>
          </button>
        </form>
        <div class="from-date" title="{{ date('Y/m/d', strtotime($n->createdAt)) }}">
          {{ date('Y/m/d', strtotime($n->createdAt)) }}
        </div>
      </div>
    @endforeach
  </div>
  @include('layout.component.common.paginate', [
    'root' => '/my-account/notifications'
  ])
</my-user-notifications>
