@extends('layouts.master')

@section('styles')

@endsection

@section('title')
    @lang('Clients list')
@endsection

@section('buttons')
    @if(checkAccess('clients_create'))
        <a href="{{route('clients.create')}}" class="btn btn-primary btn-sm">@lang('Add Client')</a>
    @endif
@endsection

@section('breadcrumbs')
    @component('components.breadcrumb')
        @slot('title') @lang('Clients list') @endslot
    @endcomponent
@endsection

@section('content')

    <livewire:datatable.clients />

@endsection

@section('scripts')
    <script>
        var element = document.getElementById("fixed-thead");
        var filterElement = document.getElementById("filter-row");
        var parentElement = element.parentElement;
        window.addEventListener('scroll', () => {
            var coordinates = parentElement.getBoundingClientRect();
            if (coordinates.y < 0) {
                element.style.transform = 'translate3d(0, ' + (-coordinates.y+48) + 'px, 0)';
                element.classList.add('sticky');
                filterElement.style.display = 'none';
            } else {
                element.style.transform = 'translate3d(0,0,0)';
                element.classList.remove('sticky');
                filterElement.style.display = 'table-row';
            }
        });
    </script>
@endsection