<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Scout2 Ruleset Generator</title>

        <!-- Bootstrap core CSS -->
        <link href="inc-bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap theme -->
        <link href="inc-bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery -->
        <script src="inc-jquery/jquery-1.11.2.min.js"></script>

        <!-- Handlebars -->
        <script src="inc-handlebars/handlebars-v3.0.0.js"></script>

        <!-- Custom JS -->
        <script src="inc-scout2/scout2.js"></script>
        <script src="inc-scout2/ruleset-generator.js"></script>
        <script src="inc-scout2/helpers.js"></script>

        <!-- Custom CSS -->
        <link href="inc-scout2/scout2.css" rel="stylesheet">
    </head>

    <body>

        <!------------------>
        <!-- Fixed navbar -->
        <!------------------>

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="ruleset_generator_metadata.list">
        </div>

        <script id="ruleset_generator_metadata.list.template" type="text/x-handlebars-template">
            <div class="container">
                <div class="navbar-header">
                    <span class="navbar-brand"><a href="javascript:show_main_dashboard()">Scout2</a></span>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        {{#each items}}
                            <li class="dropdown">
                                <a href="#groups.{{@key}}.list"><span id="ruleset_generator_metadata.{{@key}}">{{make_title @key}}</span><b class="caret"></b></a>
                            </li>
                        {{/each}}
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="javascript:generate_ruleset()"><span id="iam_filter">Generate Ruleset</span></a><a id="downloadAnchorElem" style="display:none"></a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Help<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:about()">About</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            {{#each items}}
                <div class="container" id="groups.{{@key}}.list">
                    <div class="navbar-header">
                        <span class="navbar-brand"></span>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            {{#each this}}
                                <li>
                                    <a href="javascript:filter_rules('{{@../key}}', '{{@key}}')">{{make_title @key}}</a>
                                </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            {{/each}}
        </script>

        <!--------------->
        <!-- Container -->
        <!--------------->

        <div class="container theme-showcase" id="container-user">

            <!-- Empty header -->
            <div class="page-header">
            </div>

            <!-- Overlay divs used to show entity details in a pop up fashion -->
            <div id="overlay-background" class="overlay-bg"></div>
            <div id="overlay-details" class="overlay col-sm-6"></div>

            <!-- Title section -->
            <div id="section_title-div">
                <h2 id="section_title-h2"></h2>
            </div>

            <!-- One column container -->
            <div class="row">
                <div class="col-sm-12" id="single-column">
                </div>
            </div>

            <!-- Rule -->
            <script id="rules.details.template" type="text/x-handlebars-template">
            <form>
            {{#each items}}
                {{#each this}}
                    <div class="list-group" id="rule-{{key}}">
                        <input type="hidden" id="filename" value="{{@../key}}" />
                        <div class="list-group-item active">
                            <h4 class="list-group-item-heading">
                                {{make_title (get_rule @../key 'service')}}: {{description}}
                                <!-- TODO: copy button -->
                            </h4>
                        </div>
                        <div class="list-group-item">
                            <div class="list-group-item-text item-margin"><h4>{{rationale}}</h4></div>
                            <div class="row" style="margin-top: 15px !important">
                                <div class="col-sm-6 text-center">
                                    Enabled: <input type="checkbox" id="enabled" {{#if enabled }} checked {{/if}} />
                                </div>
                                <div class="col-sm-6 text-center hello">
                                    Level: <select id="level"><option>{{level}}</option><option>{{other_level level}}</option></select>
                                </div>
                            </div>
                        </div>
                        {{#if args}}
                            <div class="list-group-item">
                                <h4 class="list-group-item-heading">Parameters</h4>
                                {{#each args}}
                                    <div class="list-group-item-text item-margin">{{get_arg_name @../../key @index}}: <input type="text" id="parameter_{{@index}}" value="{{this}}" /></div>
                                {{/each}}
                            </div>
                        {{/if}}
                        <div class="list-group-item">
                            <div class="accordion">
                                <h4 class="accordion-heading">Raw JSON
                                    <a class="accordion-toggle" data-toggle="collapse" href="#rawjson-{{key}}">
                                        <span class="badge pull-right btn-info">Details</span>
                                    </a>
                                </h4>
                                <div id="rawjson-{{key}}" class="item-margin accordion-body collapse">
                                    <div class="accordion-inner">
                                        <pre>{{json_stringify (get_rule @../key '')}}</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{/each}}
            {{/each}}
            </form>
            </script>

        </div> <!-- /container -->

        <!-- Include all AWS services configs -->
        <script src="inc-awsconfig/aws_ruleset.js"></script>

        <!-- Bootstrap core JavaScript, placed at the end of the document so the pages load faster -->
        <script src="inc-bootstrap/js/bootstrap.min.js"></script>

        <!-- Display dashbord -->
        <script>load_aws_config_from_json('ruleset_generator_metadata', 0);</script>
        <script>load_aws_config_from_json('rules', 1)</script>

    </body>
</html>
