@import model.EstateProvider

@(stage: String, totalSunkCost: Float, estateProvider: EstateProvider)(implicit request: play.api.mvc.Security.AuthenticatedRequest[_, com.gu.googleauth.UserIdentity], money: java.text.DecimalFormat)

@import model._

@main("Status Monitor",estateProvider, stage=Some(stage), refreshSecs = None, scripts = List("assets/js/settings.js")) {

     <script src='@routes.Assets.at("lib/d3js/d3.min.js")'></script>
     <script src='@routes.Assets.at("lib/zeroclipboard/ZeroClipboard.min.js")'></script>
     <script>
        ZeroClipboard.config( { moviePath: '@routes.Assets.at("lib/zeroclipboard/ZeroClipboard.swf")' } );
     </script>
    <script src="@routes.Assets.at("js/components/asg.js")"></script>
    <script src="@routes.Assets.at("js/components/queue.js")"></script>
    <script src="@routes.Assets.at("js/components/SparklinePlus.js")"></script>

    <div data-spy="affix" data-offset-top="150" class="settings">
        <button type="button" class="btn btn-default glyphicon glyphicon-wrench pull-left"
        data-toggle="modal" data-target="#config"></button>
    </div>
    <div class="container cluster-status">
        <div id="queues" class="col-sm-12">
            <script>
                React.render(
                    React.createFactory(Queues)({}),
                    document.getElementById('queues')
                );
            </script>
        </div>

        @defining(estateProvider()) { estate =>
        <div id="stage" class="row">

            @for(asg <- estate(stage).asgs) {
                @snippets.renderASG(asg)
            }
            <script>
                React.render(React.createFactory(Stage)({ name: "@stage" }), document.getElementById("stage"))
            </script>
        </div>
        <div class="row">
            <div class="well">
                Approximate total monthly cost for all ASGs: $@money.format(estate(stage).asgs.flatMap(_.approxMonthlyCost).sum)
                @if(estate.size > 1) {
                  (for all stages: $@money.format(estate.values.flatMap(_.asgs.flatMap(_.approxMonthlyCost)).sum))
                }
                @if(totalSunkCost > 0) { (total sunk cost: $@money.format(totalSunkCost)) }
            </div>
        </div>

    </div>

    <div class="modal fade" id="config" tabindex="-1" role="dialog" aria-labelledby="configLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="configLabel">Queues to show</h4>
                </div>
                <div class="modal-body">
                    <a href="#" id="all-queues">All</a> | <a href="#" id="no-queues">None</a>
                    @for(queue <- estate.queues) {
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="@queue.name" checked>
                                @queue.name
                            </label>
                        </div>
                    }
                </div>
                }
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="save-setttings" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
}