@extends('adminlte::page')
@section('title', $pageTitle)
@section('content_header')
	<h1>{{ $pageTitle }}</h1>
@stop
@section('content')
<div id="searchWrapper">
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#rankings" aria-controls="rankings" role="tab" data-toggle="tab">Ranking</a></li>
		<li role="presentation"><a href="#synonyms" aria-controls="synonyms" role="tab" data-toggle="tab">Synonyms</a></li>
		<li role="presentation"><a href="#display" aria-controls="display" role="tab" data-toggle="tab">Display</a></li>
		<li role="presentation"><a href="#replicas" aria-controls="replicas" role="tab" data-toggle="tab">Replicas</a></li>
		<li role="presentation"><a href="#frontend" aria-controls="templates" role="tab" data-toggle="tab">Front End</a></li>
	</ul>
	<form action="POST" id="searchSettings" @submit.prevent="onSubmit">
			<div class="tab-content" id="tabdata">
				<div v-if="showSubmit" class="sticky settingChanged">
					<div class="row">
						<div class="col-sm-9">
							<h5>Your settings have changed:</h5>
							<ul>
								<li v-for="attr in needsSaved" class="btn btn-xs btn-info">@{{attr}}</li>
							</ul>
						</div>
						<div class="col-sm-3 text-right">
							<h5>Please save to update your index.</h5>
							<button class="btn btn-primary" type="submit">@{{submitBtn}}</button>
						</div>
					</div>
				</div>
				<alert v-for="(item, index) in alerts" :type="item.type" dismissible :duration="duration" :key="item.key" @dismissed="alerts.splice(index, 1)">@{{item.message}}</alert>
				<div role="tabpanel" class="tab-pane fade in active" id="rankings">
					@include('settings.algolia.partials.tabs.rankings')
				</div>
				<div role="tabpanel" class="tab-pane fade" id="synonyms">
					@include('settings.algolia.partials.tabs.synonyms')
				</div>
				<div role="tabpanel" class="tab-pane fade" id="display">
					@include('settings.algolia.partials.tabs.display')
				</div>
				<div role="tabpanel" class="tab-pane fade" id="replicas">
					@include('settings.algolia.partials.tabs.replicas')
				</div>
				<div role="tabpanel" class="tab-pane fade" id="frontend">
					@include('settings.algolia.partials.tabs.frontend')
				</div>
			</div>
		</form>
</div>
@stop
@section('js')
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.min.js"></script>
	<script src="{{ mix('/js/searchAdmin.js') }}"></script>
@stop
@section('css')
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" />
	<link rel="stylesheet" href="{{ mix('/css/searchAdmin.css') }}">
@stop