{% extends "base-site.html" %}

{% block title %} Notifications {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<h2 class="page-title">Notifications <small>Transactional messages in your app</small></h2>
<div class="row">
    <div class="col-md-12">
        <section class="widget">
            <header>
                <h5>
                    Messenger
                </h5>
                <div class="widget-controls">
                    <a title="Properties" href="#"><i class="glyphicon glyphicon-cog"></i></a>
                    <a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-plus"></i></a>
                    <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-minus"></i></a>
                    <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="body">
                <div class="row">
                    <div class="col-md-4">
                        <h4>Layout options</h4>
                        <p>There are few position options available for notifications. You can click any of them
                            to change notifications position:</p>
                        <div class="location-selector">
                            <div class="bit top left" data-position="top left"></div>
                            <div class="bit top right" data-position="top right"></div>
                            <div class="bit top" data-position="top"></div>
                            <div class="bit bottom left" data-position="bottom left"></div>
                            <div class="bit bottom right" data-position="bottom right"></div>
                            <div class="bit bottom" data-position="bottom"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h4>Notification Types</h4>
                        <p>Different types of notifications for lost of use cases. Custom classes are also supported.</p>
                        <p><a class="btn btn-info" id="show-info-message" href="#">Info Message</a></p>
                        <p><a class="btn btn-danger" id="show-error-message" href="#">Error + Retry Message</a></p>
                        <p><a class="btn btn-success" id="show-success-message" href="#">Success Message</a></p>
                    </div>
                    <div class="col-md-4">
                        <h4>Dead Simple Usage</h4>
                        <p>Just few lines of code to instantiate a notifications object. Does not require passing any options:</p>
                        <pre><code>Messenger().post("Thanks for checking out Messenger!");</code></pre>
                        <p>More complex example:</p>
                        <pre><code>Messenger().post({
message: 'There was an explosion while processing your request.',
type: 'error',
showCloseButton: true
});</code></pre>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>


{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

    <!-- page specific libs -->
    <script src="/static/assets/lib/messenger/build/js/messenger.js"></script>
    <script src="/static/assets/lib/messenger/build/js/messenger-theme-flat.js"></script>

    <!-- demo-only libs -->
    <script src="/static/assets/lib/backbone/backbone.js"></script>
    <script src="/static/assets/lib/messenger/docs/welcome/javascripts/location-sel.js"></script>

    <!-- page application js -->
    <script src="/static/assets/js/ui-notifications.js"></script>

{% endblock javascripts %}