{% load humanize %}

<div class="card card-xl bg-base-100 shadow-sm">
    <div class="card-body">
        <div class="card-title flex justify-between">
            <h2 class="text-xl font-bold">Session Details</h2>
            <span class="text-xl">{{ session.uid }}</span>
        </div>
        <ul class="flex flex-col gap-2">
            <li>
                User: <b>{{ session_properties.last.session.user.email }}</b>
                <span class="text-sm">(<em>{{ session_properties.last.session.user.username }}</em>)</span>
            </li>
            <li>
                Machine: <b>{{ session_properties.last.session.machine }}</b>
            </li>
            <li>
                Category: <b>{{ session_properties.last.session.machine.deliverygroup }}</b>
            </li>
            <li>
                State: <b>{{ session_properties.last.state }}</b>
            </li>
            <li>
                Session Age:
                <b>{{ session_properties.last.session.t_start | naturaltime | cut:" ago" }}</b>
                <span class="text-sm">({{ session_properties.last.session.t_start }})</span>
            </li>
            <li>
                State Age:
                <b>{{ session_properties.last.t_change | naturaltime | cut:" ago" }}</b>
                <span class="text-sm">({{ session_properties.last.t_change }})</span>
            </li>
        </ul>
    </div>
</div>