@extends('layouts.app')

@section('title', __('titles.windows.edit_journal_theme'))

@section('content')

<section class="section js-tabs" style="min-height:80vh" id="journal_theme_edit_page">
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			@include('includes.shared.go_back_button', ['route' => 'journals.dashboard.show', 'link' => 'back_to_journal_dashboard'])
		</div>
	</div>
	<div class="columns is-centered">
		<div class="column is-three-quarters-widescreen">
			<h1 class="title is-3 mt-4">{{ __('titles.pages.edit_journal_theme') }}</h1>
		</div>
	</div>
	<div class="columns is-centered" id="tabs_container">
		<div class="column is-three-quarters-widescreen">
			<tabs class="tabs is-fullwidth">
				<ul class="js-tabs__header">
					<li data-tab="journal_theme_edit_form_one_wrapper"><a href="#" class="js-tabs__title">{{ __('titles.tabs.structure') }}</a></li>
					<li data-tab="journal_theme_edit_form_two_wrapper"><a href="#" class="js-tabs__title">{{ __('titles.tabs.color_and_font') }}</a></li>
					<li data-tab="journal_theme_edit_form_three_wrapper"><a href="#" class="js-tabs__title">{{ __('titles.tabs.images') }}</a></li>
				</ul>
			</tabs>
		</div>
	</div>
	<form action="{{ route('journals.theme.update', ['journal_id' => $journal->id]) }}" id="journal_theme_edit_form" method="POST" novalidate accept-charset="utf-8" enctype="multipart/form-data">
		@csrf
		@method('PUT')
		@include('publishing.journals.includes.journal_theme_edit_form_one')
		@include('publishing.journals.includes.journal_theme_edit_form_two')
		@include('publishing.journals.includes.journal_theme_edit_form_three')
		<div class="columns is-centered">
			<div class="column is-three-quarters-widescreen">
				<div class="block">
					<div class="field is-grouped" id="submit_button_container">
						<div class="control">
							<button class="button is-primary" type="submit" id="submit_theme_edit_form_button">{{ __('actions.shared.save') }}</button>
						</div>
						<div class="control">
							<button class="button cancel_and_close" type="button">{{ __('actions.shared.cancel') }}</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</section>
<script src="{{ url('/js/vendor/vanilla-js-tabs.min.js') }}"></script>
<link href="{{ url('/js/vendor/vanilla-js-tabs.css') }}" rel="stylesheet" type="text/css">
</link>
<script src="{{ url('/js/modules/journalThemeEditForm.js') }}"></script>
<script src="{{ url('/js/modules/journalHeaderImageUpload.js') }}"></script>
<script src="{{ url('/js/modules/journalLogoUpload.js') }}"></script>

@endsection