<style>
    :root {
        --dark: #020202;
        --light: #fffff0;
    }

    body {
        font-size: 16px;
        margin: 1em;
        color: var(--dark, #020202);
        background-color: var(--light, #fffff0);
        background-color: #fffff0;
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }

    .checkin {
        border-top: 1px solid black;
        padding: 1em 0;
    }

    .checkin__summary {
        cursor: pointer;
    }

    .checkin__title {
        display: inline;
        font-size: 1em;
    }

    .checkin__meta {
        margin: 0;
    }
</style>

<h1>track.bengoldsworthy.net {{ ucwords($digest_type) }} Digest</h1>
<p><i>Generated: {{ (new DateTime())->format('D jS F Y') }}</i></p>
<p>View the tracker <a href="https://track.bengoldsworthy.net">here.</a></p>
<hr>
<h2>Checkins</h2>
<ol>
@foreach($checkins as $checkin)
    <li>
        <details class="checkin" id="{{ $checkin->id }}">
            <summary class="checkin__summary">
                <h3 class="checkin__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h3>
                <p class="checkin__meta">{!! render_date_difference($checkin->date) !!}</p>
            </summary>
            @if($checkin->note)
            {!! $checkin->note !!}
            @endif
            @if($checkin->image_url)
            <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
            @endif
        </details>
    </li>
@endforeach
</ol>