@extends('layouts.app')
@section('title', trans('menu.decision_tree_title'))
@section('page-styles')
	<style>
		.category .card-body p {
			border : 2px solid;
			padding: 5px 10px;
			display: inline-block;
			opacity: .8;
			font-size: 1rem;
		}

		.category .card-body p:hover, .category .card-body:hover p {
			opacity: 1;
		}

	</style>
@stop

@section('content')
	<div class="content">
		<x-content.header title="{{ __('title.decisiontrees') }}" subTitle="{{ $categories->total() }} {{__('title.folders')}}"/>

        <div id="folder-search-bar" class="flex gap-3 items-center">
            <div class="search-bar w-full lg:w-auto">
                <form id="filter-form" method="POST" onsubmit="return false;">
                    <input name="term" type="text" class="album-search search-input w-full lg:w-[320px]" placeholder="{{trans('forms.lbl_search')}}" />
                    <x-svg-icon icon="icon-search" />
                </form>
            </div>
        </div>
        <div id="categories" class="relative laravel-pagination">
			@include('decisiontree::categories.list')
		</div>
	</div>

@stop

@section('footer-script')

    <script type="text/javascript">

		treeSearch = _.debounce( function($el, url) {
			getItems($el, url);
		}, 500);

		$('#filter-form input').on("keyup", function(event) {
			let url = '{{route('decision-trees.index.filter')}}';
			treeSearch($('#categories'), url);
		});

		$("body").on("change", "select[name='per_page'], select[name='per_page_tree']", function(){
			let url = '{{route('decision-trees.index.filter')}}';
			treeSearch($('#categories'), url);
        });

    </script>
@stop