@extends('layouts.main')

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/manual-notifications.css')}}"/>
    @endpush
@endonce

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">


    <x-page-header>
        VIEWING TOTAL SYSTEM NOTIFICATIONS
    </x-page-header>
    <div class="d-flex justify-content-end align-items-center gap-3 mb-5">

        <form id="push-notifications-form" style="display: contents">

            <x-ui.search-field placeholder="SEARCH TAG, TITLE">

            </x-ui.search-field>

            <x-ui.select.filter
                name="category"
                id="notificationCategory"
                :options="$notification_categories"
                all="Όλες οι κατηγορίες"
            />


            <x-ui.select.filter
                name="tag"
                id="notificationTag"
                :options="$tags"
                all="Όλα τα tags"
            >

            </x-ui.select.filter>


        </form>

    </div>


    <div id="listDataContainer" class="manual-notifications-container">

        @include('management-notifications.partials.notifications-list')
    </div>

    </div>

@endsection

@push('scripts-stack')
    <script defered>
        $s = jQuery.noConflict()
        $s(document).ready(function () {
            setAjaxFilters("{{route('management-notifications.system')}}", 'push-notifications-form')
        });
    </script>
@endpush