<!-- RIBBON -->
<div id="ribbon">

				<span class="ribbon-button-alignment"> 
					<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh"  rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true">
						<i class="fa fa-refresh"></i>
					</span> 
				</span>

    <!-- breadcrumb -->
    <ol class="breadcrumb">
        <li>Home</li><li>SmartAdmin Intel</li><li>App Settings</li>
    </ol>
    <!-- end breadcrumb -->

    <!-- You can also add more buttons to the
    ribbon for further usability

    Example below:

    <span class="ribbon-button-alignment pull-right">
    <span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span>
    <span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span>
    <span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span>
    </span> -->

</div>
<!-- END RIBBON -->



<!-- MAIN CONTENT -->
<div id="content">

    <!-- row -->
    <div class="row">

        <!-- col -->
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1 class="page-title txt-color-blueDark"><!-- PAGE HEADER --><i class="fa fa-lg fa-fw fa-cube"></i> SmartAdmin Intel <span>>
							App Settings </span></h1>
        </div>
        <!-- end col -->

    </div>
    <!-- end row -->

    <!--
    The ID "widget-grid" will start to initialize all widgets below
    You do not need to use widgets if you dont want to. Simply remove
    the <section></section> and you can use wells or panels instead
    -->

    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->
        <div class="row">

            <!-- NEW WIDGET START -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-7">

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget" id="wid-id-0" data-widget-colorbutton="false"	data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false">
                    <header>
                        <h2> Menu Toggle / Collapse / Minify </h2>
                        <span class="badge pull-right margin-right-5 margin-top-5">new</span>
                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->
                            <input class="form-control" type="text">
                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body no-padding">

                            <!-- this is what the user will see -->
                            <div class="padding-gutter">
                                To toggle minify menu manually add the class <code>
                                    minified</code>
                                to the <b><i>BODY</i></b> element. To collapse the main menu on desktops, add class <code>
                                    hidden-menu</code>
                                to the <b><i>BODY</i></b> element.
                                <br>
                                <br>

                                <span class="btn btn-default" data-action="minifyMenu"> Toggle .minify class </span>
                                &nbsp;&nbsp;
                                <button class="btn btn-default" data-action="toggleMenu">
                                    Toggle .collapse class
                                </button>

                            </div>

                            <div class="table-responsive no-margin">

                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th><b><i>attribute*</i></b></th>
                                        <th>Description</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>
                                            <code>
                                                data-action="userLogout"
                                            </code></td>
                                        <td>Logout message popup, use it with <code>
                                                data-logout-msg = "..."</code></td>
                                        <td><a href="login.html" class="btn btn-default btn-xs" data-action="userLogout" data-logout-msg="Your message here..."> action </a></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <code>
                                                data-action="resetWidgets"
                                            </code></td>
                                        <td>Resets all localStorage <i>(restores all app settings and widgets)</i></td>
                                        <td>
                                            <button class="btn btn-default btn-xs" data-action="resetWidgets">
                                                action
                                            </button></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <code>
                                                data-action="launchFullscreen"
                                            </code></td>
                                        <td>Launch full screen view <i>(works only in Chrome, Safari, Firefox and Latest IE)</i></td>
                                        <td>
                                            <button class="btn btn-default btn-xs" data-action="launchFullscreen">
                                                action
                                            </button></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <code>
                                                data-action="minifyMenu"
                                            </code></td>
                                        <td>Minify main nav <i>(works only with vertical menu case)</i></td>
                                        <td>
                                            <button class="btn btn-default btn-xs" data-action="minifyMenu">
                                                action
                                            </button></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <code>
                                                data-action="toggleMenu"
                                            </code></td>
                                        <td>Collapse left menu <i>(but still accessable by hovering left edge of screen)</i></td>
                                        <td>
                                            <button class="btn btn-default btn-xs" data-action="toggleMenu">
                                                action
                                            </button></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <code>
                                                data-action="toggleShortcut"
                                            </code></td>
                                        <td>Top slidedown / Metro menu toggle</td>
                                        <td>
                                            <button class="btn btn-default btn-xs" data-action="toggleShortcut">
                                                action
                                            </button></td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false"	data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false">
                    <header>
                        <h2>App Settings</h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->
                            <input class="form-control" type="text">
                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body no-padding">

                            <!-- this is what the user will see -->
                            <div class="padding-gutter">
                                <span class="badge bg-color-green">Note:</span> You can adjust these settings inside <span class="text-primary">app.js</span> file to your comfort.
                            </div>

                            <div class="table-responsive">

                                <table class="table table-bordered margin-top-10">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Default/Value</th>
                                        <th>Description</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><b><i>$.throttle_delay</i></b></td>
                                        <td>
                                            <code>
                                                350
                                            </code></td>
                                        <td>Impacts the responce rate of some of the responsive elements (lower value affects CPU but improves speed)</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>$.menu_speed</i></b></td>
                                        <td>
                                            <code>
                                                235
                                            </code></td>
                                        <td>The rate at which the menu expands revealing child elements on click</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>$.navAsAjax</i></b></td>
                                        <td>
                                            <code>
                                                true/false
                                            </code></td>
                                        <td>Your left nav in your app will no longer fire ajax calls, set it to false for HTML version</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>$.enableJarvisWidgets</i></b></td>
                                        <td>
                                            <code>
                                                true/false
                                            </code></td>
                                        <td>Please make sure you have included "jarvis.widget.min.js" in your page for this below feature to work</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>$.enableMobileWidgets</i></b></td>
                                        <td>
                                            <code>
                                                true/false
                                            </code></td>
                                        <td>Warning: Enabling mobile widgets could potentially crash your webApp if you have too many widgets running at once (<i>must have <b><i>$.enableJarvisWidgets</i></b> to
                                                <code>true</code></i>)</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>closedSign</i></b></td>
                                        <td>
                                            <code>
                                                fa-plus-square-o
                                            </code></td>
                                        <td>Menu open icon</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>openedSign</i></b></td>
                                        <td>
                                            <code>
                                                fa-minus-square-o
                                            </code></td>
                                        <td>Menu close icon</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>setup_widgets_desktop()</i></b></td>
                                        <td><i>function<b>()</b></i></td>
                                        <td>Setup widgets for desktop (<i>must have <b><i>$.enableJarvisWidgets</i></b> to
                                                <code>
                                                    true
                                                </code></i>) </td>
                                    </tr>
                                    <tr>
                                        <td><b><i>setup_widgets_mobile()</i></b></td>
                                        <td><i>function<b>()</b></i></td>
                                        <td>Setup widgets for desktop <i>(must have <b>$.enableJarvisWidgets</b> and <b>$.enableMobileWidgets</b> to <code>true</code>)</i></td>
                                    </tr>
                                    <tr>
                                        <td><b><i>runAllCharts()</i></b></td>
                                        <td><i>function<b>()</b></i></td>
                                        <td>Runs all inline charts including: $.sparkline and $.easyPieChart</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>runAllForms()</i></b></td>
                                        <td><i>function<b>()</b></i></td>
                                        <td>Runs all form related scripts such as $.select2, $.mask, $.datepicker and $.autocomplete</td>
                                    </tr>
                                    <tr>
                                        <td><b><i>pageSetUp()</i></b></td>
                                        <td><i>function<b>()</b></i></td>
                                        <td>Runs the following functions all at once: <i>setup_widgets_desktop<b>()</b>, setup_widgets_mobile<b>()</b>, runAllCharts<b>()</b>, runAllForms<b>()</b></i> - and also activates all tooltip and popovers</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

            </article>
            <!-- WIDGET END -->

            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-5">

                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false"	data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false">
                    <header>
                        <h2> Page layout options </h2>
                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->
                            <input class="form-control" type="text">
                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body no-padding">

                            <div class="padding-gutter padding-bottom-0">
                                Possible classes for the <b><i>BODY</i></b> tag: <code>
                                    smart-skin-{SKIN_NUMBER}</code>
                                , <code>
                                    smart-rtl</code>
                                , <code>
                                    fixed-header</code>
                                , <code>
                                    fixed-navigation</code>
                                , <code>
                                    fixed-ribbon</code>
                                , <code>
                                    fixed-footer</code>
                                , <code>
                                    container</code>

                            </div>

                            <!-- this is what the user will see -->
                            <div class="padding-gutter">
                                <div style="background: #f1f1f1;border-radius:3px;overflow: hidden">
                                    <div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px">
                                        <img src="/public/pandora/img/logo.png" alt="SmartAdmin" style="width:75px;">
                                    </div>
                                    <div style="width: 25%;height: 296px; background:#949291;" class="pull-left"></div>
                                    <div style="width: 75%;height: 255px; background:#f1f1f1;" class="pull-left">
                                        <div style="width: 100% height:20px; padding:3px; background:#C5C5C5; font-size:10px; font-weight: bold;">
                                            <i class="fa fa-home"></i> breadcrumb &gt;
                                        </div>
                                    </div>
                                    <div style="width: 75%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px" class="text-right pull-right">
                                        Footer
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="padding-gutter padding-top-0 padding-bottom-0">
                                Switch to top menu by adding class <code>
                                    .menu-on-top</code>
                            </div>

                            <div class="padding-gutter">

                                <div style="background: #f1f1f1;border-radius:3px;overflow: hidden">
                                    <div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px">
                                        <img src="/public/pandora/img/logo.png" alt="SmartAdmin" style="width:75px;">
                                    </div>
                                    <div style="width: 100%;height: 50px; background:#949291;" class="pull-left"></div>
                                    <div style="width: 100%;height: 255px; background:#f1f1f1;" class="pull-left">
                                        <div style="width: 100%; height:20px; padding:3px; background:#C5C5C5; font-size:10px; font-weight: bold;">
                                            <i class="fa fa-home"></i> breadcrumb >
                                        </div>
                                    </div>
                                    <div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px" class="text-right pull-right">
                                        Footer
                                    </div>
                                </div>

                            </div>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

            </article>

        </div>

        <!-- end row -->

        <!-- row -->

        <div class="row">

            <!-- a blank row to get started -->
            <div class="col-sm-12">
                <!-- your contents here -->
            </div>

        </div>

        <!-- end row -->

    </section>
    <!-- end widget grid -->

</div>
<!-- END MAIN CONTENT -->