@extends('layouts.app')

@section('title', $windowTitle)

@section('content')

<section class="section" style="min-height:80vh">
	<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%;">
				<div class="column">
					<h4 class="title is-5">N° {{ $issue->number }}</h4>
				</div>
				<h1 class="title is-3" id="issue_title">
					{{ Str::words($issue->title, 10) }}
				</h1>
			</div>
		</div>
		<div class="level-right" id="open_modal_button_container">
			<div class="level-item">
				<button class="button is-primary" id="issue_section_create_form" data-link="{{ route('issue_sections.create', ['issue_id' => $issue_id]) }}">
					<span class="icon">
						<i class="fas fa-folder-plus"></i>
					</span>
					<span>
						{{ __('actions.crud.create_issue_section') }}
					</span>
				</button>
			</div>
			<div class="level-item">
				<a class="button is-primary" id="create_paper_button" href="{{ route('papers.create', ['issue_id' => $issue_id]) }}">
					<span class="icon">
						<i class="fas fa-file-medical"></i>
					</span>
					<span>
						{{ __('actions.crud.create_paper') }}
					</span>
				</a>
			</div>
		</div>
	</nav>

	<div class="columns">
		<div class="column is-three-quarters-widescreen">
			<h1 class="title is-3 mt-4">{{ $pageTitle }}</h1>
		</div>
	</div>
	<div id="div_tree" data-tree-url="{{$tree_url}}"></div>
	<div class="column is-hidden" id="no_tree_available">
		<h1 class="subtitle is-5">{{ __('messages.issuePaperTree_for_issue') }}</h1>
	</div>

	<!-- <div class="block">
		<div class="field is-grouped">
			<div class="control">
				<button id="submit_tree_button" class="button is-primary" type="button" data-url="{{ $url }}">{{__('actions.shared.save')}}</button>
			</div>
		</div>		
	</div> -->

	<!-- <div>
		@foreach($issueSectionList as $node)
		<div class="column">
			@if($node->entity_type == config('app.taggables.paper'))
				<div class="box" style="border-color:black; border-style: solid; background-color: white; border-width: 2px; box-shadow: unset;padding:1.05rem;">
					<ul>
						<li>{{ $node->name }}</li>
					</ul>				
				</div>
			@elseif($node->entity_type == config('app.taggables.issueSection'))
				<div class="box" style="border-color:black; border-style: solid; background-color: lightgray; border-width: 2px; box-shadow: unset;padding:1.05rem">
					<ul>
						<li>{{ $node->name }}</li>
					</ul>				
				</div>						
			@endif

		</div>
		@endforeach
	</div> -->

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

<script src="{{ url('/js/modules/issuePaperTreeListPage.js') }}"></script>

<link rel="stylesheet" href="{{ url('js/vendor/pickletree.css') }}" />
<script src="{{ url('js/vendor/pickletree.js') }}"></script>