<?php
$this->layout('main', [
    'title' => __('Audit Log'),
    'manual' => true
]);

/** @var \App\Assets $assets */
$assets
    ->load('vue')
    ->load('daterangepicker')
    ->load('bootgrid')
    ->addInlineJs($this->fetch('admin/audit_log/index.js'));
?>

<div class="card">
    <div class="card-header bg-primary-dark">
        <div class="d-flex align-items-center">
            <h2 class="card-title flex-fill my-0">
                <?=__('Audit Log')?>
            </h2>
            <div class="flex-shrink">
                <a class="btn btn-bg mr-2 dropdown-toggle" id="reportrange" href="#">
                    <i class="material-icons" aria-hidden="true">date_range</i> <span><?=__('Last 14 Days')?></span>
                </a>
            </div>
        </div>
        <h2 class="card-title"></h2>
    </div>
    <div class="table-responsive">
        <table class="data-table table table-striped align-middle">
            <colgroup>
                <col width="20%">
                <col width="25%">
                <col width="5%">
                <col width="20%">
                <col width="20%">
                <col width="10%">
            </colgroup>
            <thead>
                <tr>
                    <th data-column-id="date_time" data-formatter="datetime"><?=__('Date/Time') ?></th>
                    <th data-column-id="user"><?=__('User') ?></th>
                    <th data-column-id="operation" data-formatter="operation" data-sortable="false">&nbsp;</th>
                    <th data-column-id="identifier" data-formatter="identifier"><?=__('Identifier') ?></th>
                    <th data-column-id="target" data-formatter="target"><?=__('Target') ?></th>
                    <th data-column-id="actions" data-formatter="actions" data-sortable="false"><?=__('Actions') ?></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="mdl-changes" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-request-label"><?=__('Changes') ?></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <table class="table" id="tbl-changes">
                    <colgroup>
                        <col width="30%">
                        <col width="35%">
                        <col width="35%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th class="pl-0"><?=__('Field') ?></th>
                        <th><?=__('Previous') ?></th>
                        <th class="pr-0"><?=__('Updated') ?></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="row in changes">
                        <td class="pl-0">{{ row.field }}</td>
                        <td><pre>{{ row.from }}</pre></td>
                        <td class="pr-0"><pre>{{ row.to }}</pre></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
