@extends('Layout.base')
@section('title', 'Notifications Settings')
@section('titleLink', '/home')
@section('content')
    <div class="panel-header-xs">

    </div>
    <div class="content mt-0" id="app">
        <div class="row">
            <x-alert />
        </div>
        <div class="md:grid md:grid-cols-3 md:gap-6">
            <div class="md:col-span-1">

                <div class="px-4 sm:px-0">
                    <div class="row">
                        <h3 class="text-lg font-medium text-gray-900">Notification Setting</h3>

                        <p class="mt-1 text-sm text-gray-600">
                            You enable or disable browser push notification.
                        </p>
                    </div>

                </div>

            </div>


            <div class="mt-5 md:mt-0 md:col-span-2">

                    <div class="shadow overflow-hidden sm:rounded-md">
                        <div class="px-4 pt-5 pb-0 bg-white sm:p-6">
                            <div class="grid grid-cols-6 gap-6">


                                <div class="col-span-6 sm:col-span-4">
                                    <label class="block font-medium text-sm text-gray-700" >
                                        Enable / Disable push notification for you browser.
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6">
                            <notification-setting />
                        </div>
                    </div>
            </div>
        </div>

    </div>

@endsection
@section('script')

@endsection