@extends('layout.index', [
	'title' => __('Shop.article_attribute_families.title'),
	'subtitle' => __('Shop.article_attribute_families.list'),
	'breadcrumb' => [__('Shop.article_attribute_families.title')]
])

@include('boilerplate::load.select2')

@section('content')

	<nav>
		<div class="nav nav-tabs">
			<a href="#families" data-toggle="tab" class="nav-item nav-link" role="tab" aria-controls="families" aria-selected="true">
				{{ __('Shop.article_attribute_families.title') }}
			</a>
			<a href="#values" data-toggle="tab" class="nav-item nav-link active" role="tab" aria-controls="values" aria-selected="false">
				{{ __('Shop.article_attribute_values.title') }}
			</a>
		</div>
	</nav>

	<div class="tab-content mb-0">

		<div class="tab-pane fade" id="families">
			@section('content')
				@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributefamilies'])
			@endsection
		</div>

		<div class="tab-pane fade  show active" id="values">
			@section('content')
				@component('components.card')
					@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'articleattributevalues'])
				@endcomponent

				@component('components.layout.modal', ['title' => 'Filtres', 'id' => 'modal-filters'])
					@include('Shop.Admin.ArticleAttributeValues.partials.filters')
				@endcomponent
			@endsection
		</div>

	</div>

@endsection

@push('scripts')
	@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributeFamilies'])
	@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'ArticleAttributeValues'])
@endpush