@foreach($checkinsList as $checkin)
    <li>
        <details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
            <summary class="checkin__summary">
                <h2 class="checkin__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>
                <p class="checkin__meta">{!! render_date_difference($checkin->date) !!}</p>
            </summary>
            @if($checkin->note)
              @if(preg_match("/\[\[[^\]]+\]\]/", $checkin->note, $filepath)
                @if(preg_match("/\.webm/", $filepath)
                <video controls>
                  <source src="/{{ $filepath }}" type="video/webm">
                  <p>Your browser doesn't support HTML video. Here is a <a href="/{{ $filepath }}">link to the video</a> instead.</p>
                </video>
                @elseif(preg_match("/\.ogg/", $filepath)
                <audio controls>
                  <source src="/{{ $filepath }}" type="audio/off">
                  <p>Download <a href="/{{ $filepath }}">OGG</a> audio.</p>
                </audio>
                @endif
              @else
              {!! $checkin->note !!}
              @endif
            @endif
            @if($checkin->image_url)
            <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
            @endif
        </details>
    </li>
@endforeach