@extends('layouts.master')

@section('browserTitle')
Image-word
@endsection


@section('breadcrumb')
@if(isset($_SESSION['logged'])&&($_SESSION['logged']==true))
<li class="breadcrumb-item"><a href="{{ route('clinicianIndex') }}">{{ trans('menu.home') }}</a></li>
<li class="breadcrumb-item"><a href="{{ route('exInputs.index') }}">{{ trans('menu.availEx') }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Image-word</li>
@endif
@endsection


@section('title')
Image-word
@endsection

@section('subtitle')
{{ trans('ex.inputs') }}
@endsection


@section('body')
<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col col-md-4">
        <img src="/img/imgWrdEx.png" class="img-thumbnail">
    </div>
    <div class="col col-md-8">
        <p>{{ trans('ex.imgWrdExLongDescription') }}</p>
    </div>
</div>

<div class="row">
    <div class="col-6 d-flex justify-content-start">
        <h2>{{ trans('ex.availInputs') }}</h2>
    </div>
    <div class="col-6 d-flex justify-content-end">
        <a href="{{ route('exInputs.create.imgWrdExInput') }}" class="my-btn my-green-btn">{{ trans('menu.addExInput') }}</a>
    </div>
    <div class="row">
        <table class="table">
            <thead>
                <th scope="col">{{ trans('ex.img') }}</th>
                <th>{{ trans('ex.level') }}</th>
                <th scope="col">{{ trans('ex.target') }}</th>
                <th scope="col">{{ trans('ex.distractors') }}</th>
                <th></th>
            </thead>
            <tbody>
                @foreach($ex_inputs as $input)
                <tr>
                    <td>
                        <img src="/{{ $input->path }}" class="input-img"><style>
                        img.input-img {
                            max-width: 100px;
                            max-height: 100px;
                        }
                        </style>
                    </td>
                    <td>{{ $input->level }}</td>
                    <td>{{ $input->target[app()->getLocale()] }}</td>
                    <td><ul>
                        @foreach($input->distractors[app()->getLocale()] as $distractor)
                        <li>{{ $distractor }}</li>
                        @endforeach
                    </ul></td>
                    
                    <td class="text-end">
                        <a href="{{ route('exInputs.edit.imgWrdExInput', ['input' => $input->id]) }}" class="my-btn my-blue-btn">{{ trans('btn.edit') }}</a>
                        <a href="{{ route('exInputs.destroy.confirm.imgWrdExInput', ['input' => $input->id]) }}" class="my-btn my-red-btn">{{ trans('btn.delete') }}</a>
                    </td> 
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
@endsection