<div class="md-wrapper body" data-target=".body" data-spy="scroll" data-twttr-rendered="true">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=all" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/vendor/simple-line-icons.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/vendor/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/vendor/uniform.default.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/vendor/jquery-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/vendor/icheck/all.css"> 
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/ca_style.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/style.css">
{*    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/vendor/components-rounded.css" rel="stylesheet">*}

    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/mdLibs.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/base.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/form.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/jquery.min.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/vendor/validator.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/vendor/bootstrap.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/vendor/bootsrap.tooltip.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/vendor/bootstrap-hover-dropdown.min.js"></script>
{*    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/vendor/jquery-ui.min.js"></script>*}
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/vendor/icheck.min.js"></script>
  

 <script data-cfasync="false" type="text/javascript">
        JSONParser.create('{$JSONCurrentUrl}');
        {literal}
            jQuery(document).ready(function(){
               
                $(".md-wrapper [title]").bstooltip();

                //used to change positioning inside of module navbar
                var navbar_in_two_lines    = false;                
                var navbar_width_hide_names    = 0;
                var resized_logo    = false;
                var web_frigate_logo         = jQuery('.logo-default').attr( "src" );
                var web_frigate_logo     = web_frigate_logo.replace("web_frigate_logo.png","web_frigate_logo-cog.png");

                function NavigationSet() {
                    var navbar_height = jQuery('.page-header').height();

                    if(jQuery('.page-header').width()<=(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width()+jQuery('.modulename > a').width()+40) && !navbar_in_two_lines) {
                        jQuery('.page-container').addClass('centered');
                        navbar_in_two_lines = true;
                    }
                    else if (jQuery('.page-header').width()>(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width()+jQuery('.modulename > a').width()+40) && navbar_in_two_lines && !navbar_width_hide_names && !resized_logo) {
                        jQuery('.page-container').removeClass('centered');
                        navbar_in_two_lines=false; 
                    }

                    //check if short logo should be shown
                    if(jQuery('.line-separator').width()<=(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width())&&!resized_logo && !navbar_width_hide_names ){
                        jQuery('.logo-default').attr( "src", web_frigate_logo );
                        resized_logo=true;
                        //switch back logo to its full form
                    }else if(jQuery('.line-separator').width()>(jQuery('.nav-menu').width()+159)&&resized_logo && !navbar_width_hide_names  ){
                        jQuery('.logo-default').attr( "src", web_frigate_logo ) ;
                        resized_logo=false;
                    }

                    //  hide page names from navigation bar
                    if(jQuery('.line-separator').width()<=(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width())&&resized_logo ){
                        navbar_width_hide_names = jQuery('.page-header').width();
                        jQuery('.navbar-nav').addClass('short');
                        //  show page names from navigation bar                        
                    } else  if(navbar_width_hide_names < jQuery('.page-header').width() && navbar_width_hide_names!=0){
                        jQuery('.navbar-nav').removeClass('short');
                        navbar_width_hide_names = 0;
                    }
                }

                $(document).ready(NavigationSet);
                $(window).resize(NavigationSet);
            });
        {/literal}
    </script>
    <div id='rockSolidSoftware-addon-content' style='position: relative'>
        <div class='addon-menu clearfix'>
            <div class='logo'>
                <a href="" target="_blank"><img src="{$assetsURL}/img/logo.png" alt="logo" class="logo-default"></a>

                <h2 class='addon-name'>{$mainName}</h2>
            </div>
            <div class='menu'>
                <ul class='clearfix'>
                    {foreach $menu as $item}
                        <li class='active'>
                            <a href="{$url}">
                                <span class='icon'></span>
                                <span class='item-label'>{$item}</span>
                            </a>
                        </li>
                    {/foreach}
                </ul>
            </div>
        </div>
                 <div class="clearfix"></div>              
        <div class="page-container">
            <div class="row-fluid" id="MDAlerts">
                {if $error}
                    <div class="alert alert-danger">                    
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <p><strong>{$error}</strong></p>
                    </div>
                {/if}   
                {if $success}
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <p><strong>{$success}</strong></p>
                    </div>
                {/if}
                <div style="display:none;" data-prototype="error">
                    <div class="note note-danger alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert"></button>
                        <strong></strong>
                        <a style="display:none;" class="errorID" href=""></a>
                    </div>
                </div>
                <div style="display:none;" data-prototype="success">
                    <div class="note note-success alert alert-success">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <strong></strong>
                    </div>
                </div>
            </div>
            <div id="MDModal">

            </div> 
            <div id="MDConfirmationModal" class="modal" style="z-index: 1055; margin: 30vh auto;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{$MDLANG->translate('confirmation_close')}</span></button>
                            <h4 class="modal-title"></h4>
                            <span style="display: none" class="default-title">{$MDLANG->translate('confirmation_default_title')}</span>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">{$MDLANG->translate('confirmation_close')}</button>
                            <button type="button" class="btn btn-danger btn-inverse" data-dismiss="modal" data-confirm="">{$MDLANG->translate('confirmation_confirm')}</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div> 
                        </div> 
            <div class="page-content" id="MDPage{$currentPageName}">
                <div class="container-fluid" id="md-container" >

                    <script>
                        {literal}
    $(document).ready(function () {
        $('#MDAlerts .close').on('click', function () {
            $('#MDAlerts').find('[data-prototype=success]').hide();
        });

    });
                        {/literal}
                    </script>