<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Purpleload - Help me translate</title>
        <style>
            {!! file_get_contents(public_path('css/bootstrap.min.css')) !!}
            {!! file_get_contents(public_path('css/all.min.css')) !!}
            {!! file_get_contents(public_path('css/admin.min.css')) !!}
        </style>
    </head>
    <body class="bg-dark text-light">
        <form action="{{ route('translate-language') }}" method="post">
            @csrf
            <div class="container-fluid sticky-top bg-primary text-light shadow mb-5">
                <div class="form-group row align-items-center no-gutters">
                    <label for="lang" class="col-form-label col-12 col-md-4 col-lg-3"><span class="h2">@lang('I want to translate into'):</span></label>
                    <div class="col-12 col-md-8 col-lg-3 col-xl-2">
                        <select name="lang" id="lang" class="form-control custom-select">
                            @foreach($languages as $key => $lang)
                            <option value="{{ $key }}"{{ $key == $currentLang ? ' selected' : '' }}>{{ $lang }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-lg-6 offset-lg-1 col-xl-6 text-lg-end my-3">
                        <div class="btn-group d-flex">
                            <button class="btn btn-dark w-50">
                                <span class="fas fa-language"></span> @lang('Show translation')
                            </button>
                            <button class="btn btn-success w-50" formaction="{{ route('translate-store') }}">
                                <span class="fas fa-save"></span> @lang('Save translation')
                            </button>
                            <button class="btn btn-secondary w-50" formaction="{{ route('translate-test') }}">
                                <span class="fas fa-spell-check"></span> @lang('Test translation')
                            </button>
                        </div>
                    </div>
                    <div class="col-12 my-3">
                        <div class="progress" style="height:30px">
                            <div class="progress-bar bg-success font-weight-bold" style="width:{{ $progress }}%;">
                                <strong>{{ round($progress, 2) }}%</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row mb-3 d-none d-sm-flex">
                    <div class="col-6 h1">@lang('English')</div>
                    <div class="col-6 h1">{{ $languages[$currentLang] }}</div>
                </div>
                @foreach($translationKeys as $key)
                <div class="row mb-3">
                    <div class="col-12 col-sm-6">
                        <label for="{{ Str::slug($key) }}" class="mb-0">{{ $key }}</label>
                    </div>
                    <div class="col-12 col-sm-6">
                        <input type="hidden" name="keys[]" value="{{ $key }}">
                        @if(strlen($key) > 50)
                        <textarea name="translations[]" id="{{ Str::slug($key) }}" class="form-control">{{ $translationValues[$key] ?? '' }}</textarea>
                        @else
                        <input type="text" id="{{ Str::slug($key) }}" name="translations[]" value="{{ $translationValues[$key] ?? '' }}" class="form-control">
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
        </form>
        <script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
        <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    </body>
</html>
