@foreach($checkinsList as $checkin)
    <li>
        @php
        $hasEmbed = null;
        $embedMissing = null;
        if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) {
          if (preg_match("/\.webm/", $filepath[1])) {
              $hasEmbed = 'video';
              if (file_exists(public_path() . "/videos/" . $filepath[1])) {
                  $embed = '<video class="popup__video" controls>';
                  $embed .= '<source src="' . url("/videos/" . $filepath[1]) . '" type="video/webm">';
                  $embed .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="' . url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
                  $embed .= '</video>'; 
              } else {
                  $embed = '<p>[The video \'' . $filepath[1] . '\' has not yet been uploaded, try again later.]</p>';
                  $embedMissing = true;
              }
          } elseif (preg_match("/\.ogg/", $filepath[1])) {
              $hasEmbed = 'audio';
              if (file_exists(public_path() . "/audio/" . $filepath[1])) {
                  $embed = '<audio class="popup__audio" controls>';
                  $embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">';
                  $embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>';
                  $embed .= '</audio>'; 
              } else {
                  $embed = '<p>[The recording \'' . $filepath[1] . '\' has not yet been uploaded, try again later.]</p>';
                  $embedMissing = true;
              }
          }
          $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
        }
        @endphp
        <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>" !!}
                  @if($hasEmbed)
                    @if($hasEmbed === 'video')
                      <span class="checkin-icon @if($embedMissing) checkin-icon--missing @endif">&#128249;</span>                    
                    @endif
                    @if($hasEmbed === 'audio')
                      <span class="checkin-icon @if($embedMissing) checkin-icon--missing @endif">&#128264;</span>                    
                    @endif

                  @endif
                </h2>
                <p class="checkin__meta">{!! render_date_difference($checkin->date) !!}</p>
            </summary>
            @if($checkin->note)

              @if($checkin->id === 3930)
                @include('partials.abolition-checkin')
              @else
                {!! $checkin->note !!}
              @endif
            @endif

            @if($checkin->image_url)
            <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
            @endif
        </details>
    </li>
@endforeach