@extends('layouts.app')

@section('content')
<div class="container app-content">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Translation</h3>
                </div>

                <div class="card-body">
                    <form method="POST" action="{{ route('admin.translation.update', $translation) }}">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label>Group</label>
                            <select name="group" class="form-control custom-select">
                                @foreach ($group_names as $group)
                                    <option value="{{ $group }}" {{ $translation->group == $group ? 'selected' : '' }}>{{ $group }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Key</label>
                            <input class="form-control @error('item') is-invalid @enderror" type="text" name="item" value="{{ $translation->item }}" required>
                        </div>
                        <div class="form-group">
                            <label>Text in English</label>
                            <fieldset disabled>
                                <input class="form-control disabled" type="text" value="{{ __("{$translation->group}.{$translation->key}") }}">
                            </fieldset>
                        </div>
                        <div class="form-group">
                            <label>Text</label>
                            <input class="form-control @error('text') is-invalid @enderror" type="text" name="text" value="{{ $translation->text }}">
                        </div>
                        <button class="btn btn-success" type="submit">Edit Translation</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection