@extends('layouts.app')

@section('title', $windowTitle)

@section('content')

<section class="section" style="min-height:80vh">
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			@include('includes.shared.go_back_button', ['route' => 'issues.index', 'link' => 'back_to_issues_list'])
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<h1 class="title is-3 mt-4">{{ $pageTitle }}</h1>
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<div class="tabs is-fullwidth is-boxed">
				<ul>
					<li id="tab_one" class="is-active" data-tab="issue_edit_form_one_wrapper"><a id="tab_one_link" href="#">1.{{ __('titles.tabs.identification') }}</a></li>
					<li id="tab_two" data-tab="issue_edit_form_two_wrapper"><a id="tab_two_link" href="#">2.{{ __('titles.tabs.coordinators_and_tags') }}</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="columns is-centered is-active form_wrapper" id="issue_edit_form_wrapper" data-step="1" data-form="issue_edit_form">
		<div class="column is-three-quarters-widescreen">
			<div class="block">
				<form action="{{ $url }}" id="issue_edit_form" method="POST" novalidate>
					@csrf
					@method($method)
					<span id="form_one" class="is-active">@include('publishing.issues.includes.issue_edit_form_step_one')</span>	
					<span id="form_two" class="is-hidden">@include('publishing.issues.includes.issue_edit_form_step_two')</span>
					<div class="field is-grouped">
						<div class="control">
							<button id="submit_step_two_button" class="button is-primary" type="submit">{{__('actions.shared.save')}}</button>
						</div>
						<div class="control">
							<a href="{{route('issues.index')}}" class="button is-text has-text-primary">{{__('actions.shared.cancel')}}</a>
						</div>
					</div>					
				</form>
			</div>
		</div>
	</div>


	<div id="modal_container"></div>		
</section>

<script src="{{ url('/js/modules/issueEditForm.js') }}"></script>
<script src="{{ url('/js/autocompletes/userAutocomplete.js') }}"></script>
<script src="{{ url('/js/modules/addCoordinatorsForm.js') }}"></script>
<script src="{{ url('/js/autocompletes/tagAutocomplete.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.02.min.css">
@endsection