{{#> 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-toggle="tab" href="#tab-content-0">
                    <span>Toastr Alerts</span>
                </a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-1" data-toggle="tab" href="#tab-content-1">
                    <span>Sweet Alerts</span>
                </a>
            </li>
            <li class="nav-item">
                <a role="tab" class="nav-link" id="tab-2" data-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="form-group">
                                    <label class="form-label" for="title">Title</label>
                                    <input id="title" type="text" class="form-control"
                                        placeholder="Enter a title ..." />
                                </div>
                                <div class="form-group">
                                    <label class="form-label" for="message">Message</label>
                                    <textarea class="form-control" id="message" rows="3"
                                        placeholder="Enter a message ..."></textarea>
                                </div>
                                <div class="form-group">
                                    <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="form-group">
                                    <label for="showEasing">Show Easing</label>
                                    <input id="showEasing" type="text" placeholder="swing, linear" class="form-control"
                                        value="swing" />
                                </div>
                                <div class="form-group">
                                    <label for="hideEasing">Hide Easing</label>
                                    <input id="hideEasing" type="text" placeholder="swing, linear" class="form-control"
                                        value="linear" />
                                </div>
                                <div class="form-group">
                                    <label for="showMethod">Show Method</label>
                                    <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown"
                                        class="form-control" value="fadeIn" />
                                </div>
                                <div class="form-group">
                                    <label for="hideMethod">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="form-group">
                                    <label class="form-label" for="showDuration">Show Duration</label>
                                    <input id="showDuration" type="number" placeholder="ms" class="form-control"
                                        value="300" />
                                </div>
                                <div class="form-group">
                                    <label class="form-label" for="hideDuration">Hide Duration</label>
                                    <input id="hideDuration" type="number" placeholder="ms" class="form-control"
                                        value="1000" />
                                </div>
                                <div class="form-group">
                                    <label class="form-label" for="timeOut">Time out</label>
                                    <input id="timeOut" type="number" placeholder="ms" class="form-control"
                                        value="5000" />
                                </div>
                                <div class="form-group">
                                    <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-left">
                            <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-right">
                            <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-1" role="tabpanel">
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Success</h5>
                                <button type="button" data-type="success" class="btn btn-success btn-show-swal">Show
                                    Alert</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Question</h5>
                                <button type="button" data-type="question" class="btn btn-primary btn-show-swal">Show
                                    Alert</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Danger</h5>
                                <button type="button" data-type="danger" class="btn btn-danger btn-show-swal">Show
                                    Alert</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Info</h5>
                                <button type="button" data-type="info" class="btn btn-info btn-show-swal">Show
                                    Alert</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Warning</h5>
                                <button type="button" data-type="warning" class="btn btn-warning btn-show-swal">Show
                                    Alert</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Example 1</h5>
                                <button type="button" class="btn btn-primary btn-show-swal-basic">Show Alert</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Example 2</h5>
                                <button type="button" class="btn btn-primary btn-show-swal-basic-2">Show Alert</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 text-center card">
                            <div class="card-body">
                                <h5 class="card-title">Custom Animation</h5>
                                <button type="button" class="btn btn-primary btn-show-swal-basic-3">Show Alert</button>
                            </div>
                        </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="close" aria-label="Close" data-dismiss="alert">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    I am an alert and I can be dismissed!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{> AppFooter/footer }}
</div>
{{/ base }}