<#function renderSearch rank search target>
    <#if search?? >
    
    <#if (rank.diff < 0) >
        <#assign diffclass = 'text-success' >
    <#elseif (rank.diff > 0) >
        <#assign diffclass = 'text-danger' >
    <#else>
        <#assign diffclass = '' >
    </#if>
    
    <#if rank.rank == 32767 >
        <#assign last_rank = '-' >
    <#else>
        <#assign last_rank = rank.rank >
    </#if>
    
    <#if rank.previousRank == 32767 >
        <#assign previous_rank = '-' >
    <#else>
        <#assign previous_rank = rank.previousRank >
    </#if>    
    
    <#return '
        <tr>
            <td class="nowraptd">
                ' + fu.gsIcoInfos(search) + '
                <a href="${reverseRoute("google.GoogleSearchController", "search", "groupId", target.getGroupId(), "searchId", search.getId())}" data-toggle="tooltip" title="${search.getKeyword()}" >
                ${search.getKeyword()}
            </a></td>
            <td class="text-right"><span  data-toggle="tooltip" title="${i18n("label.previous")} : ${previous_rank}" >${last_rank}</span></td>
            <td class="text-center ${diffclass}" ><span data-toggle="tooltip" title="${rank.getDisplayDiff()}" >${rank.getDisplayDiff()}</span></td>
        </tr>
        '/>
    </#if>
    <#return ""/>
</#function>
<#import "homeLayout.ftl.html" as layout> 
<@layout.homeLayout i18n("home.title") >
    <#list summaries as record>
    <#assign target = record.target >
    <#assign summary = record.summary >
    <#assign targetLink = reverseRoute("google.GoogleTargetController", "target", "groupId", target.getGroupId(), "targetId", target.getId()) >
    <#assign targetLinkVariation = reverseRoute("google.GoogleTargetController", "target", "groupId", target.getGroupId(), "targetId", target.getId(), "display", "variation") >
    <div class="row top15">
        <div class="col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-google-plus-square" data-toggle="tooltip" title="Google"></i> | 
                        <a href="${reverseRoute("google.GoogleGroupController", "view", "groupId", target.getGroupId())}" >${record.groupName}</a> | 
                        <a href="${targetLink}" >${target.getName()}</a>
                    </h3>
                </div>
                <div class="box-body">

                        <div class="hb-left-container" >
                            <div class="hb-score">
                                <div class="hb-body" >
                                    <p class="score-title">${fu.formatScore(summary.getScoreBP())}%</p>
                                    <#if (summary.getDiffBP() > 0) >
                                    <p class="text-success" data-toggle="tooltip" 
                                       title="${i18n("label.previous")} : ${fu.formatScore(summary.getPreviousScoreBP())}%">
                                       +${fu.formatScore(summary.getDiffBP())}
                                    </p>
                                    <#elseif (summary.getDiffBP() < 0)>
                                    <p class="text-danger" data-toggle="tooltip" 
                                       title="${i18n("label.previous")} : ${fu.formatScore(summary.getPreviousScoreBP())}%">
                                       ${fu.formatScore(summary.getDiffBP())}
                                    </p>
                                    <#else>
                                    <p data-toggle="tooltip" 
                                       title="${i18n("label.previous")} : ${fu.formatScore(summary.getPreviousScoreBP())}%">0</p>
                                    </#if>
                                    <div class="hb-score-history" data-values="<#list record.scoreHistory as score>${fu.formatScore(score)}<#sep>,</#list>" ></div>
                                </div>
                                <div class="hb-legend" ><i class="fa fa-trophy"></i> score</div>
                            </div>

                            <div class="hb-piechart">
                                <canvas class="hb-body hb-piechart-canvas" 
                                    data-top3="${summary.getTotalTop3()}" data-top10="${summary.getTotalTop10()}" 
                                    data-top100="${summary.getTotalTop100()}" data-out="${summary.getTotalOut()}"
                                ></canvas>
                                <div class="hb-legend hb-chart-legend" ></div>
                            </div>                        
                        </div>

                        <div class="hb-right-container">
                            <div class="row" >
                                <div class="col-sm-4" >
                                    <div class="hb-body" >
                                        <table class="table table-condensed hb-top-table" >
                                            <thead>
                                                <tr>
                                                    <th>${i18n("label.keyword")}</th>
                                                    <th class="width10" >rank</th>
                                                    <th class="width10 text-center" >+/-</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <#list summary.getTopRanks() as rank >
                                                    <#noescape>${renderSearch(rank, searches?api.get(rank.googleSearchId), target)}</#noescape>
                                                </#list>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="hb-legend text-center" ><a href="${targetLinkVariation}">${i18n("home.top5rank")}</a></div>
                                </div>                                
                                <div class="col-sm-4" >
                                    <div class="hb-body" >
                                        <table class="table table-condensed hb-top-table" >
                                            <thead>
                                                <tr>
                                                    <th>${i18n("label.keyword")}</th>
                                                    <th class="width10" >rank</th>
                                                    <th class="width10 text-center" >+/-</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <#list summary.getTopImprovements() as rank >
                                                    <#noescape>${renderSearch(rank, searches?api.get(rank.googleSearchId), target)}</#noescape>
                                                </#list>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="hb-legend text-center" ><a href="${targetLinkVariation}">${i18n("home.top5improvement")}</a></div>
                                </div>
                                <div class="col-sm-4" >
                                    <div class="hb-body" >
                                        <table class="table table-condensed hb-top-table" >
                                            <thead>
                                                <tr>
                                                    <th>${i18n("label.keyword")}</th>
                                                    <th class="width10" >rank</th>
                                                    <th class="width10 text-center" >+/-</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <#list summary.getTopLosts() as rank >
                                                    <#noescape>${renderSearch(rank, searches?api.get(rank.googleSearchId), target)}</#noescape>
                                                </#list>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="hb-legend text-center" ><a href="${targetLinkVariation}">${i18n("home.top5lost")}</a></div>
                                </div>                            
                            </div>
                        </div>
                        
                </div>
            </div>
        </div>
    </div>
    </#list>
</@>