TraceDash/resources/views/components/moderator-actions.blade.php

@php
    $showChannel = $showChannel ?? false;
@endphp
<table class="w-full table-auto">
    <thead>
        <tr>
            <th class="px-4 py-2">Time &amp; date</th>
            <th class="px-4 py-2">Command</th>
            <th class="px-4 py-2">Moderator</th>
            @if ($showChannel)
                <th class="px-4 py-2">Channel</th>
            @endif
        </tr>
    </thead>
    <tbody>
        @foreach ($actions as $action)
            <tr>
                <td class="px-4 py-2 border" title="{{ $action->timestamp }} UTC" data-timestamp="{{ $action->timestamp->toIso8601String() }}"></td>
                @if (empty($action->targetName()))
                    <td class="px-4 py-2 break-all border">
                        <code>{{ $action->formatted() }}</code>
                    </td>
                @else
                    <td class="px-4 py-2 break-all border">
                        <code>
                            {!! $action->formatted(true) !!}
                        </code>
                    </td>
                @endif
                <td class="px-4 py-2 border">
                    @if (!empty($action->user))
                        {{ $action->user->login }}
                    @endif
                </td>
                @if ($showChannel)
                    @php
                        $channel = $action->channel->username();
                    @endphp

                    <td class="px-4 py-2 border">
                        <a class="text-rose-400" href="{{ route('dashboard.channel', ['channel' => $channel]) }}">
                            {{ $channel }}
                        </a>
                    </td>
                @endif
            </tr>
        @endforeach
    </tbody>
    @if ($actions->hasPages())
        <tfoot>
            <tr>
                <td colspan="{{ $showChannel ? 4 : 3 }}" class="px-4 py-2 border">
                    {{ $actions->links() }}
                </td>
            </tr>
        </tfoot>
    @endif
</table>


@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const timestamps = document.querySelectorAll('[data-timestamp]');

            // Get locale from browser for Intl.DateTimeFormat
            const locale = navigator.language;

            const formatterOpts = {
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
            };

            const formatter = new Intl.DateTimeFormat(locale, formatterOpts);

            for (const timestamp of timestamps) {
                const date = new Date(timestamp.dataset.timestamp);
                timestamp.innerText = formatter.format(date);
            }
        });
    </script>
@endsection