@extends('layouts.app')

@section('title', $window_title)

@section('content')
<section class="section" style="min-height:80vh">
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<nav class="level block">
				<div class="level-left" style="max-width:80%;">
					<div class="level-item">
						<figure class="image mx-auto">
							@if(file_exists(url('storage' . $journal->logo_img)))
							<img src="{{ asset('storage' . $journal->logo_img) }}" alt="Logo de la revue" style="height:64px;">
							@else
							<img src="https://numerev.com/images/logo_menu.png" alt="Logo NumeRev" style="height:64px;">
							@endif
						</figure>
					</div>
					<div class="level-item" style="display:inline-flex;flex-direction:column;align-items:flex-start;max-width:80%;">
						<h1 class="title is-3" id="journal_title">
							{{ $journal->title }}
						</h1>
					</div>
				</div>
			</nav>
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<h1 class="title is-3 mt-4">{{ $page_title }}</h1>
		</div>
	</div>

	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<article class="message is-info">
				<div class="message-body">
					{!! __('copy.evaluation_criteria_list_message') !!}
				</div>
			</article>
			@if(session()->has('success'))
			@include('includes.shared.auto_dismiss_toast', ['message_kind' => session('success.message_kind'), 'message' => session('success.message')])
			@endif
			<div class="block">
				<form action="{{ $url }}" id="evaluation_criteria_create_form" method="POST">
					@csrf
					<div class="columns">
						<div class="column">
							<div class="field">
								<label for="name" class="label is-required">
									{{ __('labels.name') }}
									@contexterror(['field' => 'name'])
								</label>
								<div class="control">
									<input type="text" class="input" name="name" id="name" data-url="{{ route('journal_evaluation_criteria.search') }}" required />
									<input id="criterion_id" name="criterion_id" type="hidden" />
								</div>
							</div>
						</div>
						<div class="column is-one-quarter">
							<div class="field">
								<label for="submission_kind" class="label is-required">
									{{Str::ucfirst(__('labels.grid'))}}
									@contexterror(['field' => 'submission_kind'])
								</label>
								<div class="control">
									<div class="select is-fullwidth">
										<select name="submission_kind" id="submission_kind">
											@foreach($submission_kinds as $kind)
											<option value="{{ $kind }}">{{ __('labels.kinds.' . $kind) }}</option>
											@endforeach
										</select>
									</div>
								</div>
							</div>
						</div>
						<div class="column">
							<div class="field">
								<label class="label">&nbsp;</label>
								<div class="control">
									<button id="submit_criterion_button" class="button is-primary is-outlined" type="submit">
										{{__('actions.shared.save')}}
									</button>
								</div>
							</div>
						</div>

					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<div class="block" id="evaluation_criteria_table_container">
				@include('publishing.journal_evaluation_criteria.includes.journal_evaluation_criteria_table')
			</div>
		</div>
	</div>
</section>
<div id="modal_container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
<script src="{{ url('/js/autocompletes/journalEvaluationCriterionAutocomplete.js') }}"></script>
<script src="{{ url('/js/modules/journalEvaluationCriteriaTable.js') }}"></script>
<script src="{{ url('/js/modules/editEvaluationCriterionForm.js') }}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css">
@endsection