<!--
        BEGIN: App-Loading Screen.
        --
        Until the AngularJS application code is loaded and bootstrapped, this is just
        "static HTML." Meaning, the [class-based] directive, "mAppLoading", won't
        actually do anything until the application is initialized. As such, we'll give
        it just enough CSS to "fail open"; then, when the AngularJS app loads, the
        directive will run and we'll remove this loading screen.
        NOTES ON ANIMATION:
        When the AngularJS application is loaded and starts bootstrapping, all
        animations are disabled until all the routing information and templating
        information is loaded AND at least two digests have run (in order to prevent
        a flurry of animation activity). As such, we can't animate the root of the
        directive. Instead, we have to add "ngAnimateChildren" to the root element
        and then animate the inner container. The "ngAnimateChildren" directive allows
        us to override the animation-blocking within the bounds of our directive, which
        is fine since it only runs once.
    -->
<div class="m-app-loading" m-app-loading ng-animate-children>

    <!--
        HACKY CODE WARNING: I'm putting Style block inside directive so that it
        will be removed from the DOM when we remove the directive container.
    -->
    <style type="text/css">
        div.m-app-loading {
            position: fixed ;
        }
        div.m-app-loading div.animated-container {
            /*background-color: #333333 ;*/
            margin: 20px;
            bottom: 0px ;
            left: 0px ;
            opacity: 1.0 ;
            position: fixed ;
            right: 0px ;
            top: 0px ;
            z-index: 999999 ;
        }
        /* Used to initialize the ng-leave animation state. */
        div.m-app-loading div.animated-container.ng-leave {
            opacity: 1.0 ;
            transition: all linear 200ms ;
            -webkit-transition: all linear 200ms ;
        }
        /* Used to set the end properties of the ng-leave animation state. */
        div.m-app-loading div.animated-container.ng-leave-active {
            opacity: 0 ;
        }
        div.m-app-loading div.messaging {
            color: #444 ;
            /*font-family: monospace ;*/
            left: 0px ;
            margin-top: -37px ;
            position: absolute ;
            right: 0px ;
            text-align: center ;
            top: 20% ;
        }
        div.m-app-loading h1 {
            font-size: 26px ;
            line-height: 35px ;
            margin: 0px 0px 20px 0px ;
        }
        div.m-app-loading p {
            font-size: 18px ;
            line-height: 14px ;
            margin: 0px 0px 0px 0px ;
        }
    </style>


    <!-- BEGIN: Actual animated container. -->
    <div class="animated-container">

        <div class="messaging">

            <!--<img class="img-responsive" style="margin: auto" src="<%=baseUrl%>/images/logo-color.png">-->
            <div class="clearfix"></div>
            <br>
            <div class="loader">Loading...</div>
            <!--<h1>-->
            <!--App is Loading...-->
            <!--</h1>-->

        </div>

    </div>
    <!-- END: Actual animated container. -->

</div>
<!-- END: App-Loading Screen. -->