<!DOCTYPE html>
<html lang="en" ng-app="reportApp">
    <head ng-controller="InfoController">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ get_info().title }}</title>

        <!-- CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/prism.css" rel="stylesheet">
        <link href="css/local.css" rel="stylesheet">

        <!-- JS -->
        <script type="text/javascript" src="js/js-yaml.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script type="text/javascript" src="js/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/feather.min.js"></script>
        <script type="text/javascript" src="js/prism.js"></script>

        <script type="text/javascript" src="js/app.js"></script>


        <link rel="shortcut icon" href="favicon.png" type="image/png">
    </head>

    <body>

        <div class="container" id="browser-warning" ng-cloak>
            <div class="alert alert-warning" role="alert">
                <h4 class="alert-heading">Cannot access local files</h4>
                <p>
                    We could not load the template files, probably due to browser security measures.
                </p>
                <hr />
                <p>
                    To view the the file <code>report/index.html</code> locally:
                    <ul>
                        <li>If you are using <b>Firefox</b> disable <code>privacy.file_unique_origin</code> in <code>about:config</code>.</li>
                        <li>If you are using <b>Chrome</b>, start it with <code>--allow-file-access-from-files</code>.</li>
                    </ul>
                </p>
                <hr />
                <p class="mb-0">
                    Or start a local webserver with <code>grond report -so</code>.
                </p>
            </div>
        </div>

        <ng-view>
        </ng-view>

        <hr />


        <div ng-controller="InfoController" class="container footer" ng-cloak>
            <div class="row no-gutters">
                <div class="col-2">
                </div>
                <div class="col-10">
                    <p class="text-center">
                        <a href="https://pyrocko.org/grond/" target="_blank">Busted with Grond</a> -
                        <span ng-if="get_report_grond_versions().length > 0">Report:
                            <span ng-repeat="vers in get_report_grond_versions()">
                                v{{ vers + ($last ? '' : ', ') }}
                            </span> -
                        </span>
                        App: v{{ get_version() }}
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>
