@(
        oldStacks: List[String],
        charts: List[models.Chart],
        metrics: models.Metrics,
        accountNames: List[String]
)

@import views.html.fragments.ssaAmiForm
@import views.html.fragments.metricsHeader

@main("Welcome to AMIable") {
    <div class="hero grey lighten-3">
        <div class="container">
            <h1 class="hide">AMIable</h1>
            @metricsHeader(metrics)
            <div class="row">
                <div id="charts-container" class="col l6 m12">
                   @allCharts(charts)
                </div>
                <div class="col l6 m12">
                    <p class="grey-text darken-1">
                        Stacks running old AMIs
                    </p>
                    @for(stack <- oldStacks) {
                        <div class="chip"><a href="/instanceAMIs?stack=@stack">@stack</a></div>
                    }
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col s12">
                @ssaAmiForm(SSAA.empty, accountNames)
            </div>
            <div class="col m6">
                <form action="/ami" method="get" class="row">
                    <div class="input-field col s12">
                        <input type="text" name="imageId" id="imageId" placeholder="Image ID" />
                        <label for="arn">Lookup AMI</label>
                        <button class="btn waves-effect waves-light right" type="submit">
                            Lookup AMI
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
}{
    @if(charts.nonEmpty) {
        <script src="/assets/javascripts/Chart.Core.min.js"></script>
        <script src="/assets/javascripts/Chart.Scatter.min.js"></script>
        <script>
        @for(chart <- charts) {
                var tzOffsetSecs = new Date().getTimezoneOffset() * 60,
                        data = [
                            @for(timeSerie <- chart.data) {
                                @if(timeSerie != chart.data.head) {, }
                                {
                                    label: '@timeSerie.label',
                                    strokeColor: '@timeSerie.color',
                                    data: [
                                            @for(((datetime, value), i) <- timeSerie.data.zipWithIndex) {
                                                @if(i != 0) {, }
                                                {x: new Date(@datetime.getMillis -tzOffsetSecs), y: @value}
                                            }
                                    ]
                                }
                            }
                        ],
                        options = {
                            pointDot: false,
                            bezierCurve: false,
                            showTooltips: true,
                            scaleShowHorizontalLines: true,
                            scaleShowLabels: true,
                            scaleTimeFormat: "H:MM",
                            scaleDateTimeFormat: "mmm d, yyyy, HH:MM",
                            responsive: true,
                            scaleType: "date",
                            useUtc: false // display in local time
                        },
                        ctx = document.getElementById("@chart.id-chart").getContext("2d");
                new Chart(ctx).Scatter(data, options);
        }
        </script>
    }
}

@allCharts(charts: List[models.Chart]) = {
    @if(charts.nonEmpty) {
        <div>
            <ul class="charts-nav__tabs tabs">
        @for(chart <- charts) {
            <li class="charts-nav__tab tab"><a class="grey-text" href="#@chart.id">@chart.title</a></li>
        }
            </ul>
        </div>
        @for(chart <- charts) {
            <div id="@chart.id" class="charts__chart-container">
                <canvas id="@chart.id-chart" class="charts__chart"></canvas>
            </div>
        }
    }
}