{{#> base }}
    {{> AppSidebar/sidebar components-notifications=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                <li class="nav-item">
                    <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-content-0">
                        <span>Toastr Alerts</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-2" data-bs-toggle="tab" href="#tab-content-2">
                        <span>Basic Alerts</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <div class="card-title">Toastr Configurator</div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="title">Title</label>
                                        <input id="title" type="text" class="form-control" placeholder="Enter a title ..."/>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="message">Message</label>
                                        <textarea class="form-control" id="message" rows="3" placeholder="Enter a message ..."></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input id="closeButton" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="closeButton">
                                                Close Button
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="addBehaviorOnToastClick">
                                                Add behavior on toast click
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input disabled id="addBehaviorOnToastCloseClick" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="addBehaviorOnToastCloseClick">
                                                Add behavior on toast close button click
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="debugInfo" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="debugInfo">
                                                Debug
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="progressBar" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="progressBar">
                                                Progress Bar
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="rtl" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="rtl">
                                                Right-To-Left
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="preventDuplicates" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="preventDuplicates">
                                                Prevent Duplicates
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="addClear" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="addClear">
                                                Add button to force clearing a toast
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input id="newestOnTop" type="checkbox" value="checked" class="form-check-input"/>
                                            <label class="form-check-label" for="newestOnTop">
                                                Newest on top
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div id="toastTypeGroup">
                                        <h5>Toast Type</h5>
                                        <div class="form-check">
                                            <input type="radio" name="toasts" class="form-check-input" value="success" checked/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Success
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="toasts" class="form-check-input" value="info" checked/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Info
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="toasts" class="form-check-input" value="warning" checked/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Warning
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="toasts" class="form-check-input" value="error" checked/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Error
                                            </label>
                                        </div>
                                    </div>
                                    <div id="positionGroup">
                                        <h5>Position</h5>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-top-right" checked/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Top Right
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-bottom-right"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Bottom Right
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-bottom-left"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Bottom Left
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-top-left"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Top Left
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-top-full-width"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Top Full Width
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-bottom-full-width"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Bottom Full Width
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-top-center"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Top Center
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input type="radio" name="positions" class="form-check-input" value="toast-bottom-center"/>
                                            <label class="form-check-label" for="exampleRadios1">
                                                Bottom Center
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="showEasing" class="form-label">Show Easing</label>
                                        <input id="showEasing" type="text" placeholder="swing, linear" class="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="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="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="form-control" value="fadeOut"/>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="mb-3">
                                        <label class="form-label" for="showDuration">Show Duration</label>
                                        <input id="showDuration" type="number" placeholder="ms" class="form-control" value="300"/>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="hideDuration">Hide Duration</label>
                                        <input id="hideDuration" type="number" placeholder="ms" class="form-control" value="1000"/>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="timeOut">Time out</label>
                                        <input id="timeOut" type="number" placeholder="ms" class="form-control" value="5000"/>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="extendedTimeOut">Extended time out</label>
                                        <input id="extendedTimeOut" type="number" placeholder="ms" class="form-control" value="1000"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-block clearfix">
                            <div class="float-start">
                                <button type="button" class="btn btn-link text-danger" id="cleartoasts">Clear Toasts</button>
                                <button type="button" class="btn btn-link" id="clearlasttoast">Clear Last Toast</button>
                            </div>
                            <div class="float-end">
                                <button type="button" class="btn btn-success" id="showtoast">Show Toast</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane tabs-animation fade" id="tab-content-2" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Alerts</h5>
                                    <div class="alert alert-primary fade show" role="alert">This is a primary alert — check it out!</div>
                                    <div class="alert alert-secondary fade show" role="alert">This is a secondary alert — check it out!</div>
                                    <div class="alert alert-success fade show" role="alert">This is a success alert — check it out!</div>
                                    <div class="alert alert-danger fade show" role="alert">This is a danger alert — check it out!</div>
                                    <div class="alert alert-warning fade show" role="alert">This is a warning alert — check it out!</div>
                                    <div class="alert alert-info fade show" role="alert">This is a info alert — check it out!</div>
                                    <div class="alert alert-light fade show" role="alert">This is a light alert — check it out!</div>
                                    <div class="alert alert-dark fade show" role="alert">This is a dark alert — check it out!</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Alerts Link Color</h5>
                                    <div class="alert alert-primary fade show" role="alert">This is a primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-secondary fade show" role="alert">This is a secondary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-success fade show" role="alert">This is a success alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-danger fade show" role="alert">This is a danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-warning fade show" role="alert">This is a warning alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-info fade show" role="alert">This is a info alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-light fade show" role="alert">This is a light alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                    <div class="alert alert-dark fade show" role="alert">This is a dark alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Alerts Content</h5>
                                    <div class="alert alert-success fade show" role="alert"><h4 class="alert-heading">Well done!</h4>
                                        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                                        <hr>
                                        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Dismissable Alerts</h5>
                                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        I am an alert and I can be dismissed!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}