@extends('translation::layout')

@section('body')



<div class="card">

    <h5 class="card-header">
        {{ __('translation::translation.translations') }}
    </h5>

    <div class="card-body p-0">

        {!! Form::open(['url' =>  route('languages.translations.index', ['language' => $language]), 'class' => 'form-horizontal', 'method'=>'get']) !!}

        <div class="form-row align-items-center  pb-0 px-4 pt-1">
        <div class="col-12">
            <p><em>Hinweis: Platzhalter in den Inhalte die mit einem Doppelkunkt beginnen (wie :date :num :attribute etc), oder Platzhalter wie $0 oder {0} müssen erhalten bleiben und werden bei der Ausgabe dynamisch durch entsprechende Werte ersetzt.
                <br>Tags wie &lt;b> &lt;strong&gt; &lt;br&gt; etc. formatieren den Text und sollten genau so in den Übersetzungen übernommen werden. </em></p>
        </div>
        </div>


        <div class="form-row align-items-center px-4 pb-2 pt-1">
            
           

            <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                @include('translation::forms.select', ['name' => 'group', 'items' => $groups, 'submit' => true, 'selected' => Request::get('group'), 'optional' => false])
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-lg-2 mb-1">
                @include('translation::forms.select', ['name' => 'language', 'items' => $languages, 'submit' => true, 'selected' => $language])
            </div>
            <div class="col-6 col-sm-4 col-md-4 col-lg-4 mb-1">
                @include('translation::forms.search', ['name' => 'filter', 'value' => Request::get('filter')])
           </div>
           <div class="col-6 col-sm-4 col-md-2 col-lg-2 mb-1">
                <a href="{{route('languages.translations.create', $language) }}" class="btn btn-sm btn-primary">
                    {{ __('translation::translation.add') }} {{ __('translation::translation.translations') }}
                </a>
            </div>
          
        </div>
        {!! Form::close() !!}
        <style>

        </style>
        <div class="card-datatable table-responsive pt-0">
            <table class="datatables-style table table-striped table-bordered" id="">
                <thead>
                <tr>
                    <tr>
                       
                        <th style="width: 40%;">{{ $language }}</th>
                        <th style="width: 40%;">{{ config('app.locale') }}</th>

                        <th style="width: 10%;">{{ __('translation::translation.group_single') }}</th>
                        <th style="width: 10%;">{{ __('translation::translation.key') }}</th>
                    </tr>
                </tr>
                </thead>
                <tbody>
                    @foreach($translations as $type => $items)
                                
                    @foreach($items as $group => $trans)

                        @foreach($trans as $key => $value)
                            @if(isset($value[config('app.locale')]))
                                <tr>
                                    <td>
                                        <translation-input 
                                            initial-translation="{{ $value[$language] }}" 
                                            language="{{ $language }}" 
                                            group="{{ $group }}" 
                                            translation-key="{{ $key }}" 
                                            route="{{ config('translation.ui_url') }}">
                                        </translation-input>
                                    </td>
                                    <td>{{ $value[config('app.locale')] }}</td>
                                  
                                    <td>{{ $group }}</td>
                                    <td><span style="display: inline-block; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $key }}</span></td>
                                </tr>
                            @endif

                        @endforeach

                    @endforeach
                               
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    $( document ).ready(function() {

        $("textarea").each(function(){
            this.style.height = "5px";
            this.style.height = (this.scrollHeight) + "px";
        });
        $("textarea").focus(function(){
            this.style.height = "5px";
            this.style.height = (this.scrollHeight) + "px";
        });
        $("textarea").focusout(function(){
            this.style.height = "5px";
            this.style.height = (this.scrollHeight) + "px";
        });
        $("textarea").on('change keyup paste', function() {
            this.style.height = "5px";
            this.style.height = (this.scrollHeight) + "px";

        });
       
    });
</script>


@endsection