@extends('layouts.app')

@section('title', __('app.translations'))

@section('controller-data', 'common:datatable;translations:index')

@section('breadcrumb')
<li class="breadcrumb-item">
    <a href="/"><i class="fas fa-home"></i> {{ __('app.home') }}</a>
</li>
<li class="breadcrumb-item active">{{ __('app.translations') }}</li>
@endsection

@section('content')
<input type="hidden" id="records-quantity" value="{{ $paginationRecordQuantity }}" />
<input type="hidden" id="crud-route" value="{{ $route }}" />

<div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <h5>
        <i class="icon fa-solid fa-triangle-exclamation"></i> {{ __('app.attention') }}
    </h5>
    {{ __('app.notice_translations') }}
</div>

<div class="row">
    <div class="col-md-12">
        @include('flash-message')
        
        <div class="box">
            <div class="box-body datatable-filter-container">
                <form id="index-form-filters" action="{{ route($route . '.index') }}" method="POST" autocomplete="off">
                    @method('POST')
                    @csrf
                    
                    <div class="row">
                        <div class="input-group col-md-4">
                            <input type="text" class="form-control" name="search_es" placeholder="{{ __('app.spanish_text') }}" autocomplete="off" autocorrect="off" />
                        </div>
                        <div class="input-group col-md-4">
                            <input type="text" class="form-control" name="search_en" placeholder="{{ __('app.english_text') }}" autocomplete="off" autocorrect="off" />
                        </div>
                        
                        <div class="col-md-3 filter-buttons">
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger protip filter-btn-clean" id="clear-filters" data-pt-position="bottom" data-pt-title="{{ __('app.clean_search') }}">
                                    <i class="fa fa-times" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="btn btn-primary protip filter-btn-search" id="set-filters" data-pt-position="bottom" data-pt-title="{{ __('app.search') }}">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
            @if($recordQuantity > 0)
            <div class="box-body table-responsive no-padding datatable-table-container">
                <table id="index-table" class="table table-sm table-hover datatable-table">
                    <thead>
                        <tr>
                            <th>{{ __('app.original_language') }}</th>
                            <th>{{ __('app.english_language') }}</th>
                            <th>{{ __('app.actions') }}</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>{{ __('app.original_language') }}</th>
                            <th>{{ __('app.english_language') }}</th>
                            <th>{{ __('app.actions') }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            @else
            <div class="box-body">
                <div class="row">
                    <div class="col-12 text-center">
                        <i class="fa-solid fa-language fa-8x"></i>
                    </div>
                    <div class="col-12 mt-3 text-center">
                        <h4>{!! __('app.empty_translations') !!}</h4>
                    </div>
                    <div class="col-12 mt-3 text-center">
                        <a class="btn btn-primary btn-lg" href="{{ route($route . '.create') }}">{{ __('app.create_translation') }}</a>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection