@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<style>
    #recTable td, #recTable th { vertical-align: middle; }
    /* numeric columns: Events(3), Size(4) */
    #recTable td:nth-child(3), #recTable td:nth-child(4),
    #recTable th:nth-child(3), #recTable th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
    #recTable td:last-child { display: flex; gap: 6px; align-items: center; }
    #recTable td:last-child .mo-btn { box-sizing: border-box; min-height: 0; padding: 3px 12px; font-size: 13px; line-height: 1.6; }
</style>
@stop
@section('content')
@include('includes.page_header', [
    'title'   => 'Recordings',
    'purpose' => 'Session replays of how staff use the tool. Recordings contain customer details entered into quotes — treat them as confidential.',
])
<div class="row">
    <table id="recTable">
        <thead>
            <tr>
                <th>Started</th>
                <th>User</th>
                <th>Events</th>
                <th>Size</th>
                <th>Duration</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>
</div>
@stop
@section('js')
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
function recHumanBytes(n) {
    n = Number(n) || 0;
    if (n < 1024) { return n + ' B'; }
    var u = ['KB', 'MB', 'GB'], i = -1;
    do { n = n / 1024; i++; } while (n >= 1024 && i < u.length - 1);
    return n.toFixed(1) + ' ' + u[i];
}
$(function () {
    $('#recTable').DataTable({
        ajax: { url: baseUrl + '/rec/sessions' },
        order: [[0, 'desc']],
        language: { emptyTable: 'No recordings yet.' },
        columns: [
            { data: 'started', render: function (d, type, row) { return (type === 'sort' || type === 'type') ? (row.started_ts || 0) : d; } },
            { data: 'email' },
            { data: 'events' },
            { data: 'bytes', render: function (d, type) { return (type === 'sort' || type === 'type') ? d : recHumanBytes(d); } },
            { data: 'duration' },
            { data: 'session', orderable: false, render: function (s) {
                var id = encodeURIComponent(s);
                return '<a class="mo-btn mo-btn--edit" href="' + baseUrl + '/rec/' + id + '">Watch</a>'
                     + '<a class="mo-btn" href="' + baseUrl + '/rec/' + id + '/download">Download</a>';
            } },
        ],
    });
});
</script>
@stop