{{ include('partials/main.html.twig') }}

    <head>
        
        {{ include('partials/title-meta.html.twig', {title: 'Notifications'}) }}

        <link rel="stylesheet" type="text/css" href="/libs/toastr/build/toastr.min.css">

        {{ include('partials/head-css.html.twig') }}

    </head>

    {{ include('partials/body.html.twig') }}

        <!-- Begin page -->
        <div id="layout-wrapper">

            {{ include('partials/menu.html.twig') }}

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                        {{ include('partials/page-title.html.twig', {pagetitle: 'UI Elements', title: 'Notifications'}) }}

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-xl-4">
                                                <div class="control-group">
                                                    <div class="controls">
                                                        <div class="mb-3">
                                                            <label class="form-label">Title</label>
                                                            <input id="title" type="text" class="input-large form-control" placeholder="Enter a title ..." />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="form-label">Message</label>
                                                            <textarea class="input-large form-control" id="message" rows="3" placeholder="Enter a message ..."></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="control-group my-4">
                
                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="closeButton">
                                                        <label class="form-check-label" for="closeButton">
                                                            Close Button
                                                        </label>
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="addBehaviorOnToastClick">
                                                        <label class="form-check-label" for="addBehaviorOnToastClick">
                                                            Add behavior on toast click
                                                        </label>
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="debugInfo">
                                                        <label class="form-check-label" for="debugInfo">
                                                            Debug
                                                        </label>
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="progressBar">
                                                        <label class="form-check-label" for="progressBar">
                                                            Progress Bar
                                                        </label>
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="preventDuplicates">
                                                        <label class="form-check-label" for="preventDuplicates">
                                                            Prevent Duplicates
                                                        </label>
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="addClear">
                                                        <label class="form-check-label" for="addClear">
                                                            Add button to force clearing a toast, ignoring focus
                                                        </label>
                                                    </div>

                                                    <div class="form-check mb-2">
                                                        <input class="form-check-input" type="checkbox" value="checked" id="newestOnTop">
                                                        <label class="form-check-label" for="newestOnTop">
                                                            Newest on top
                                                        </label>
                                                    </div>
        
                                                </div>
                                            </div>
                
                                            <div class="col-xl-2">
                                                <div class="control-group" id="toastTypeGroup">
                                                    <div class="controls mb-4">
                                                        <label class="text-muted">Toast Type</label>
                                                        
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="toast-type-radio" id="toast-type-radio1" value="success" checked>
                                                            <label class="form-check-label" for="toast-type-radio1">
                                                                Success
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="toast-type-radio" id="toast-type-radio2" value="info">
                                                            <label class="form-check-label" for="toast-type-radio2">
                                                                Info
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="toast-type-radio" id="toast-type-radio3" value="warning">
                                                            <label class="form-check-label" for="toast-type-radio3">
                                                                Warning
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="toast-type-radio" id="toast-type-radio4" value="error">
                                                            <label class="form-check-label" for="toast-type-radio4">
                                                                Error
                                                            </label>
                                                        </div>
                
                                                    </div>
                                                </div>
                                                <div class="control-group" id="positionGroup">
                                                    <div class="controls mb-4">
                                                        <label class="text-muted">Position</label>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio1" value="toast-top-right" checked>
                                                            <label class="form-check-label" for="positions-radio1">
                                                                Top Right
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio2" value="toast-bottom-right">
                                                            <label class="form-check-label" for="positions-radio2">
                                                                Bottom Right
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio3" value="toast-bottom-left">
                                                            <label class="form-check-label" for="positions-radio3">
                                                                Bottom Left
                                                            </label>
                                                        </div>
                
                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio4" value="toast-top-left">
                                                            <label class="form-check-label" for="positions-radio4">
                                                                Top Left
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio5" value="toast-top-full-width">
                                                            <label class="form-check-label" for="positions-radio5">
                                                                Top Full Width
                                                            </label>
                                                        </div>

                                                        <div class="form-check mb-2">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio6" value="toast-bottom-full-width">
                                                            <label class="form-check-label" for="positions-radio6">
                                                                Bottom Full Width
                                                            </label>
                                                        </div>

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio7" value="toast-top-center">
                                                            <label class="form-check-label" for="positions-radio7">
                                                                Top Center
                                                            </label>
                                                        </div>

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="positions-radio" id="positions-radio8" value="toast-bottom-center">
                                                            <label class="form-check-label" for="positions-radio8">
                                                                Bottom Center
                                                            </label>
                                                        </div>
                
                                                    </div>
                                                </div>
                                            </div>
                
                                            <div class="col-xl-3 col-sm-6">
                                                <div class="control-group">
                                                    <div class="controls">
                                                        <div class="mb-3">
                                                            <label for="showEasing" class="form-label">Show Easing</label>
                                                            <input id="showEasing" type="text" placeholder="swing, linear" class="input-mini form-control" value="swing" />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="hideEasing" class="form-label">Hide Easing</label>
                                                            <input id="hideEasing" type="text" placeholder="swing, linear" class="input-mini form-control" value="linear" />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="showMethod" class="form-label">Show Method</label>
                                                            <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="input-mini form-control" value="fadeIn" />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="hideMethod" class="form-label">Hide Method</label>
                                                            <input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="input-mini form-control" value="fadeOut" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                
                                            <div class="col-xl-3 col-sm-6">
                                                <div class="control-group">
                                                    <div class="controls">
                                                        <div class="mb-3">
                                                            <label for="showDuration" class="form-label">Show Duration</label>
                                                            <input id="showDuration" type="text" placeholder="ms" class="input-mini form-control" value="300" />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="hideDuration" class="form-label">Hide Duration</label>
                                                            <input id="hideDuration" type="text" placeholder="ms" class="input-mini form-control" value="1000" />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="timeOut" class="form-label">Time out</label>
                                                            <input id="timeOut" type="text" placeholder="ms" class="input-mini form-control" value="5000" />
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="extendedTimeOut" class="form-label">Extended time out</label>
                                                            <input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini form-control" value="1000" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end row -->
                
                                        <div class="row mt-4">
                                            <div class="col-md-12">
                                                <div class="d-flex flex-wrap gap-2">
                                                    <button type="button" class="btn btn-primary" id="showtoast">Show Toast</button>
                                                    <button type="button" class="btn btn-danger" id="cleartoasts">Clear Toasts</button>
                                                    <button type="button" class="btn btn-danger" id="clearlasttoast">Clear Last Toast</button>
                                                </div>
                                            </div>
                                        </div>
                
                                        <div class="row mt-3">
                                            <div class="col-md-12">
                                                <pre id='toastrOptions' class="toastr-options"></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->
                        
                    </div> <!-- container-fluid -->
                </div>
                <!-- End Page-content -->

                
                {{ include('partials/footer.html.twig') }}
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->

        {{ include('partials/right-sidebar.html.twig') }}

        {{ include('partials/vendor-scripts.html.twig') }}
        <!-- toastr plugin -->
        <script src="/libs/toastr/build/toastr.min.js"></script>

        <!-- toastr init -->
        <script src="/js/pages/toastr.init.js"></script>

        <script src="/js/app.js"></script>

    </body>
</html>
