@extends('admin::layouts.master')
@section('title', 'Translations - ' . strtoupper($locale))
@section('content')
<div class="container mx-auto px-4 py-6">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Translations: {{ strtoupper($locale) }}</h1>
    <a href="{{ route('admin.languages.index') }}" class="border border-gray-300 px-4 py-2 rounded-lg hover:bg-gray-50 transition">← Back to Languages</a>
  </div>

  @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
  @endif

  <div class="bg-white rounded-lg shadow p-6">
    <form method="POST" action="{{ route('admin.languages.update-translations', $locale) }}">
      @csrf
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        @forelse($translations as $key => $value)
          <div class="border rounded-lg p-3">
            <label class="block text-xs font-mono text-gray-500 mb-1">{{ $key }}</label>
            <input type="text" name="{{ $key }}" value="{{ $value }}" class="w-full border rounded px-2 py-1.5 text-sm">
          </div>
        @empty
          <div class="col-span-full text-center py-8 text-gray-500">No translation keys found for this locale.</div>
        @endforelse
      </div>
      @if(count($translations) > 0)
        <div class="mt-6">
          <button type="submit" class="bg-primary text-white px-6 py-2 rounded-lg hover:opacity-90 transition">Save Translations</button>
        </div>
      @endif
    </form>
  </div>
</div>
@endsection