@section('title', __('Translation') )
    <div>

        <x-baseview title="{{ __('Translation') }}">
            <x-form action="translate">
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <p>{{ __('Text(new line for new text)') }}</p>
                        <textarea class="w-full h-64 p-2 border rounded" wire:model.defer='text'></textarea>
                    </div>
                    <div>
                        <p>{{ __('Language Codes(seperate lines with ;)') }}</p>
                        <textarea class="w-full p-2 mb-4 border rounded" wire:model.defer='languages'></textarea>
                        <p>{{ __('For backend') }}</p>
                        <x-checkbox title="{{ __('Enable') }}" name="forBackend" :defer="true" />
                    </div>

                    <x-buttons.primary title="{{ __('Translate') }}" />
                </div>
            </x-form>

            <div>
                {!! $translatedString !!}
                
            </div>
        </x-baseview>


    </div>