@section('actions_toolbar')
    <a id="add" class="btn btn-sm btn-light-primary font-weight-bolder">
        <span class="fad fa-plus"></span> New Project</a>&nbsp;
@endsection
<style>
    .select2-container {
        width: 200px !important;
        padding: 0;
    }
</style>
<x-base-layout>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="far fa-filter text-primary"></i>
                    </span>
                    <h4 class="card-label">Filter:</h4>
                    <select id="statuses" class="form-control select2">
                        <option selected disabled class="text-gray-800"> Select an status</option>
                        <option value=""> All</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status->id }}">
                                {{ $status->name_en }} </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="card-body">
                <table class="table data-table" id="data-table"></table>
            </div>
        </div>
    </div>
</x-base-layout>

@include('dashboard.projects.js')