@extends('Backend.Layout.app')

@section('content')

    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container  d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{translate('languages')}}</h1>
                    <!--end::Title-->
                </div>
                <!--end::Page title-->
                <!--end::Actions-->
            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->


        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container ">
                <!--begin::Card-->
                <div class="card  card-flush">
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">


                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">




                            <!--end::Menu-->

                            <div id="kt_datatable_example_buttons" class="d-none"></div>


                        </div>
                    </div>

                    <div class="card-body  py-4">
                        <table class="table align-middle  rounded table-row-dashed fs-6 g-5"
                               id="kt_datatable_example">
                            <thead>

                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th class="min-w-50px">#</th>
                                <th class="min-w-125px">{{translate('Lang')}}</th>

                                <th class="min-w-125px">{{translate('Action')}}</th>
                            </tr>
                            <!--end::Table row-->
                            </thead>
                            <tbody class="fw-semibold text-gray-600">
                                                        @foreach(languages() as $language)
                                                                    <tr data-id="{{$language }}">
                                    <th>{{$i}}</th>
                                    <th>{{$language }}</th>

                                    <th>
                                        <a href="#"
                                           class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm"
                                           data-kt-menu-trigger="click"
                                           data-kt-menu-placement="bottom-end">{{translate('Actions')}}
                                            <i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                        <!--begin::Menu-->
                                        <div
                                            class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                            data-kt-menu="true">
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a href="{{ route('backend.settings.languages.translate', ['lang' => $language  ]) }}"
                                                   class="menu-link px-3">{{ translate('Show') }}</a>
                                            </div>





                                            <!--end::Menu item-->
                                            <!--begin::Menu item-->
{{--                                            <div class="menu-item px-3">--}}
{{--                                                <a class="menu-link px-3 btn-danger">{{translate('Delete')}}</a>--}}
{{--                                            </div>--}}
                                            <!--end::Menu item-->
                                        </div>
                                    </th>
                                </tr>


                             @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->





@endsection