@import config.AMIableConfig
@(
        filterSsa: SSAA,
        metrics: models.Metrics,
        amisWithUpgrades: List[AMI],
        amiSSAs: List[(SSAA, List[AMI])],
        instancesCount: Map[(SSAA, AMI), Int],
        accountNames: List[String],
        conf: AMIableConfig
)

@import views.html.fragments.{ssaAmiForm, amiOverlay, printSSA, metricsHeader}

@main("Instance AMIs") {
    <div class="heading grey lighten-3">
        <div class="container">
            <div class="row">
                <div class="col m7">
                    @metricsHeader(metrics)
                </div>
                <div class="col m5 hide-on-small-only">
                    <p class="right-align"><a href="#search">[edit search]</a></p>
                    @printSSA(filterSsa, "*")
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="amis-list">
                @for(amiWithUpgrade <- amisWithUpgrades) {
                    <div class="amis-list__item">
                        @amiOverlay(amiWithUpgrade, conf, instancesCount.get(filterSsa, amiWithUpgrade))
                    </div>
                }
            </div>
        </div>
        <div class="row">
            <h2>AMI usage</h2>
            <div class="ssa-amis">
                @for((ssaa, amis) <- amiSSAs) {
                    @if(ssaa.isEmpty) {
                        @* show AMIs with empty SSAs in their own block (there are lots of them) *@
            </div>
        </div>

        <div class="row">
            <div class="card empty-ssaa-card">
            @printSSA(ssaa)
            <div class="ssa-amis">
                        @for(ami <- amis) {
                            <div class="ssa-amis__item">
                                @amiOverlay(ami, conf, instancesCount.get(ssaa, ami))
                            </div>
                        }
            </div>
        </div>
        <div class="row">
            <div class="ssa-amis">
                    } else {
                        <div class="ssa-amis__item">
                            <div class="card">
                                <div class="card-content">
                                    @printSSA(ssaa)
                                    @for(ami <- amis) {
                                        @amiOverlay(ami = ami, conf, instanceCount = instancesCount.get(ssaa, ami), stackStageApp = Some(ssaa))
                                    }
                                </div>
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
        <a name="search"></a>
        @ssaAmiForm(filterSsa, accountNames)
    </div>
}()