<h4 class="mb-4"><i class="fas fa-language me-2"></i><?= lang('admin.translations') ?></h4>
<div class="card mb-3"><div class="card-body">
    <div class="row g-2">
        <div class="col-md-3"><select id="lang-filter" class="form-select form-select-sm"><?php foreach ($languages as $l): ?><option value="<?= $l['id'] ?>"><?= e($l['name_en']) ?> (<?= e($l['code']) ?>)</option><?php endforeach; ?></select></div>
        <div class="col-md-3"><select id="group-filter" class="form-select form-select-sm"><option value="">All Groups</option><?php foreach ($groups as $g): ?><option value="<?= e($g['translation_group']) ?>"><?= e($g['translation_group']) ?></option><?php endforeach; ?></select></div>
        <div class="col-md-2"><button class="btn btn-sm btn-primary" id="btn-filter-trans">Filter</button></div>
        <div class="col-md-2 ms-auto"><button class="btn btn-sm btn-success" id="btn-save-trans"><i class="fas fa-save me-1"></i>Save All</button></div>
    </div>
</div></div>
<div class="card"><div class="card-body">
    <table id="trans-table" class="table table-sm w-100" data-url="/admin/translations/datatable"
           data-columns='[{"data":"group"},{"data":"key"},{"data":"value","orderable":false}]'>
        <thead><tr><th>Group</th><th>Key</th><th>Value</th></tr></thead>
    </table>
</div></div>
<?php $__view->push('scripts') ?>
<script>
const tt=DataTableHelper.init('trans-table',{paging:false,ajax:{data:function(d){d.language_id=$('#lang-filter').val();d.group_filter=$('#group-filter').val();}}});
$('#btn-filter-trans').click(function(){DataTableHelper.reload('trans-table');});
$('#btn-save-trans').click(function(){const data={_token:'<?= csrf_token() ?>',translations:{}};$('.translation-input').each(function(){data.translations[$(this).data('id')]=$(this).val();});
    $.post('/admin/translations/save',data,function(r){if(r.success)FormHelper.showToast('success',r.message);else FormHelper.showToast('error',r.message);},'json');});
</script>
<?php $__view->endPush() ?>