@extends('layouts.app')
@section('title', __('app.translation_manager'))
@section('content')
<div class="page-head"><div><h1><i class="fa-solid fa-language"></i> {{ __('app.translation_manager') }}</h1><p>{{ __('app.translation_manager_hint') }}</p></div></div>
<form class="filters advanced-search" method="get"><input name="q" value="{{ request('q') }}" placeholder="{{ __('app.search') }}"><button class="btn secondary"><i class="fa-solid fa-filter"></i> {{ __('app.filter') }}</button></form>
<form method="post" action="{{ route('translations.update') }}" class="panel animated-panel">
@csrf
<div class="form-grid">
    <div data-mdb-input-init class="form-outline"><input class="form-control" name="new_key" placeholder=" "><label class="form-label">{{ __('app.new_translation_key') }}</label></div>
    <div data-mdb-input-init class="form-outline"><input class="form-control" name="new_value_en" placeholder=" "><label class="form-label">English</label></div>
    <div data-mdb-input-init class="form-outline"><input class="form-control" name="new_value_ps" placeholder=" "><label class="form-label">پښتو</label></div>
    <div data-mdb-input-init class="form-outline"><input class="form-control" name="new_value_fa" placeholder=" "><label class="form-label">دری</label></div>
    <div class="wide"><button class="btn"><i class="fa-solid fa-plus"></i> {{ __('app.add_new_key') }}</button></div>
</div>
<div class="table-wrap translation-table">
<table><thead><tr><th>{{ __('app.key') }}</th>@foreach($locales as $locale => $label)<th>{{ $label }}</th>@endforeach</tr></thead><tbody>
@foreach($keys as $key)
<tr><td><strong>{{ $key }}</strong></td>@foreach($locales as $locale => $label)<td><textarea name="translations[{{ $key }}][{{ $locale }}]">{{ $translations[$locale][$key] ?? '' }}</textarea></td>@endforeach</tr>
@endforeach
</tbody></table>
</div>
<div class="wizard-actions"><span>{{ $keys->count() }} {{ __('app.records') }}</span><button class="btn pulse-soft"><i class="fa-solid fa-check"></i> {{ __('app.save_translations') }}</button></div>
</form>
@endsection