{{extends "base.html"}}
{{import "breadcrumb.html"}}

{{block head()}}
<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#datatable').DataTable({
            "pageLength": 10,
            "order": [[ 4, 'desc' ]],
            "stateSave": false,
            "dom": "<'row'<'col-sm-12'tr>><'row'<'col-sm-4'i><'col-sm-4 text-center'p><'col-sm-4 text-end'l>>",
            "searchCols": [
                null,
                {search: $('input:checkbox[name="sha256_chk"]').val()},
            ],
            "language": {
                "emptyTable": "No events.",
                "info": "Showing _START_ to _END_ of _TOTAL_",
                "infoFiltered": " (filtered from _MAX_)",
                "infoEmpty": "Showing 0 entries"
            }
        });

        $.fn.dataTable.ext.search.push(function( settings, searchData, index, rowData, counter ) {
            var action = $('input:checkbox[name="action_chk"]:checked').map(function() {
                return this.value;
            }).get();
            if (action.length === 0) {
                return true;
            }
            if (action.indexOf(searchData[0]) !== -1) {
                return true;
            }
            return false;
        });
        $('input:checkbox[name="action_chk"]').on('change', function () {
            table.draw();
        });

        $('input:checkbox[name="sha256_chk"]').on('change', function () {
            if ($(this).prop('checked')) {
                table.column(1).search($(this).val()).draw() ;
            } else {
                table.column(1).search('').draw() ;
            }
        });

        $('#events-search').on('keyup', function() {
            table.search(this.value).draw();
        });
    });
</script>
{{end}}

{{block body()}}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb rounded shadow-sm">
        {{ yield breadcrumb() }}
        <li class="breadcrumb-item active" aria-current="page"><strong>Event Log</strong></li>
    </ol>
</nav>

{{if eventsAllowed}}
<div class="card shadow-sm mb-4">
    <div class="card-body">
        <input type="text" id="events-search" class="form-control mb-3" placeholder="Search events...">
        <div class="d-flex gap-4">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="action_chk" value="push" id="hidePullCheck">
                <label class="form-check-label" for="hidePullCheck">Hide Pull</label>
            </div>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" name="sha256_chk" value="!@sha256" id="hideSha256Check" checked>
                <label class="form-check-label" for="hideSha256Check">Hide sha256 entries</label>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table id="datatable" class="table table-hover table-striped mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Action</th>
                        <th>Image</th>
                        <th>IP Address</th>
                        <th>User</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody>
                    {{range _, e := events}}
                        <tr>
                            <td><span class="badge bg-primary">{{ e.Action }}</span></td>
                            {{if hasPrefix(e.Tag,"sha256:") }}
                            <td title="{{ e.Tag }}">
                                <a href="{{ basePath }}/{{ e.Repository }}@{{ e.Tag }}" class="text-decoration-none">
                                    <span class="small">{{ e.Repository }}@{{ e.Tag[:19] }}...</span>
                                </a>
                            </td>
                            {{else}}
                            <td>
                                <a href="{{ basePath }}/{{ e.Repository }}:{{ e.Tag }}" class="text-decoration-none">
                                    <span class="small">{{ e.Repository }}:{{ e.Tag }}</span>
                                </a>
                            </td>
                            {{end}}
                            <td><span class="text-muted small">{{ e.IP }}</span></td>
                            <td><span class="text-muted small">{{ e.User }}</span></td>
                            <td><span class="text-muted small">{{ e.Created|pretty_time }}</span></td>
                        </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>
</div>
{{else}}
<div class="alert alert-warning text-center" role="alert">
    <i class="bi bi-exclamation-triangle fs-1"></i>
    <h4 class="mt-3">Access Denied</h4>
    <p>User "{{user}}" is not permitted to view the Event Log.</p>
</div>
{{end}}
{{end}}