<div class="row top5" >
    <div class="col-xs-12" >
        <table class="table table-condensed table-bordered table-striped" id="table-target" >
            <thead>
            <tr>
                <th class="compact-col text-center" ><a href="#" id="btn-chk-target">#</a></th>
                <th class="compact-col" ></th>
                <!--<th style="width:120px;"></th>-->
                <th data-sort="string" >${i18n("label.name")} <i class="fa fa-sort" ></i></th>
                <th class="compact-col" >${i18n("label.type")}</th>
                <th>${i18n("label.pattern")}</th>                                
                <th data-sort="int" class="compact-col">Score <i class="fa fa-sort" ></i></th>
                <th class="compact-col">${i18n("label.history")}</th>
                <th data-sort="int" >top 3 <i class="fa fa-sort" ></i></th>
                <th data-sort="int" >top 10 <i class="fa fa-sort" ></i></th>
                <th data-sort="int" >top 100 <i class="fa fa-sort" ></i></th>
                <th data-sort="int" >out <i class="fa fa-sort" ></i></th>                                
            </tr>
            </thead>
            <tbody>
            <#list targets as target>
            <#if summaries?api.get(target.getId())?? >
                <#assign summary = summaries?api.get(target.getId()) >
            </#if>
            <tr id="target-${target.getId()}">
                <td><input class="chk-target" type="checkbox" name="id[]" value="${target.getId()}" /></td>
                <td  class="compact-col">
                    <#if user.isAdmin()>
                    <a  href="${reverseRoute("google.GoogleGroupController","delTarget","groupId",group.getId())}" 
                        data-toggle="tooltip" title="${i18n("label.delete")}" 
                        class="btn-delete-target" data-id="${target.getId()}" >
                        <i class="glyphicon glyphicon-remove text-danger"></i></a>
                    <a  href="${reverseRoute("google.GoogleGroupController","renameTarget","groupId",group.getId())}" 
                        data-toggle="tooltip" title="${i18n("label.rename")}" 
                        class="btn-rename-target" data-id="${target.getId()}" >
                        <i class="glyphicon glyphicon-edit"></i></a>                                        
                    </#if>
                </td>
                <!--<td></td>-->                                
                <td><a class="target-name" href="${reverseRoute("google.GoogleTargetController", "target", 
                       "groupId", group.getId(), "targetId", target.getId())}" >${target.getName()}</a>
                    <a href="${reverseRoute("google.GoogleTargetController","target","groupId",group.getId(), "targetId", target.getId(), "display", "variation")}" data-toggle="tooltip" title="${i18n("google.target.variations")}" ><span class="fa fa-random"></span></a>                    
                    <a href="${reverseRoute("google.GoogleTargetController","target","groupId",group.getId(), "targetId", target.getId(), "display", "chart")}" data-toggle="tooltip" title="${i18n("label.chart")}" ><span class="glyphicon glyphicon-signal"></span></a>
                    <a href="${reverseRoute("google.GoogleTargetController","target","groupId",group.getId(), "targetId", target.getId(), "display", "table")}" data-toggle="tooltip" title="${i18n("label.table")}" ><span class="fa fa-table"></span></a>                                    
                </td>
                <td>${target.getType().toString()?lower_case}</td>
                <td>${target.getPattern()}</td>                                
                <td>
                    <#if summaries?api.get(target.getId())?? >
                        <span class="<#if (summary.getDiffBP() > 0) >text-success<#elseif (summary.getDiffBP() < 0)>text-danger</#if>" data-toggle="tooltip" 
                    title="${i18n("label.previous")} : ${fu.formatScore(summary.getPreviousScoreBP())}%" >${fu.formatScore(summary.getScoreBP())}%</span>
                    </#if>
                </td>
                <td>
                    <#if histories?api.get(target.getId())?? >
                        <#assign history = histories?api.get(target.getId()) >
                        <span class="score-history-inline" data-values="<#list history as score>${fu.formatScore(score)}<#sep>,</#list>" ></span>
                    </#if>
                </td>
                <td class="td-top-kw">
                    <#if summaries?api.get(target.getId())?? && (summaries?api.get(target.getId()).getTotalKeywords() > 0) >
                    <div class="progress" data-toggle="tooltip" title="${(summary.getTotalTop3()/summary.getTotalKeywords()*100)?string["0.##"]}%">
                        <div class="progress-bar" style="width: ${(summary.getTotalTop3()/summary.getTotalKeywords()*100)?c}%;">
                            <span >
                                ${summary.getTotalTop3()}/${summary.getTotalKeywords()}
                            </span>
                        </div>
                    </div>
                    </#if>
                </td>
                <td class="td-top-kw">
                    <#if summaries?api.get(target.getId())?? && (summaries?api.get(target.getId()).getTotalKeywords() > 0) >
                    <div class="progress" data-toggle="tooltip" title="${(summary.getTotalTop10()/summary.getTotalKeywords()*100)?string["0.##"]}%">
                        <div class="progress-bar" style="width: ${(summary.getTotalTop10()/summary.getTotalKeywords()*100)?c}%;">
                            <span >
                                ${summary.getTotalTop10()}/${summary.getTotalKeywords()}
                            </span>
                        </div>
                    </div>
                    </#if>
                </td>
                <td class="td-top-kw">
                    <#if summaries?api.get(target.getId())?? && (summaries?api.get(target.getId()).getTotalKeywords() > 0) >
                    <div class="progress" data-toggle="tooltip" title="${(summary.getTotalTop100()/summary.getTotalKeywords()*100)?string["0.##"]}%">
                        <div class="progress-bar" style="width: ${(summary.getTotalTop100()/summary.getTotalKeywords()*100)?c}%;">
                            <span >
                                ${summary.getTotalTop100()}/${summary.getTotalKeywords()}
                            </span>
                        </div>
                    </div>
                    </#if>
                </td>
                <td class="td-top-kw">
                    <#if summaries?api.get(target.getId())?? && (summaries?api.get(target.getId()).getTotalKeywords() > 0) >
                    <div class="progress" data-toggle="tooltip" title="${(summary.getTotalOut()/summary.getTotalKeywords()*100)?string["0.##"]}%">
                        <div class="progress-bar" style="width: ${(summary.getTotalOut()/summary.getTotalKeywords()*100)?c}%;">
                            <span >
                                ${summary.getTotalOut()}/${summary.getTotalKeywords()}
                            </span>
                        </div>
                    </div>
                    </#if>
                </td>                                
            </tr>
            </#list>
            </tbody>
        </table>
        <div style="margin-bottom: 20px;">
            <a href="#" class="btn btn-primary btn-add-target" title="${i18n("label.addWebsite")}" data-toggle="tooltip" >
               <i class="glyphicon glyphicon-star hidden-lg" ></i><span class="hidden-xs hidden-sm hidden-md" > ${i18n("label.addWebsite")}</span>
            </a>
            <input id="btn-delete-targets" type="button" class="btn btn-danger" value="${i18n("google.group.deleteWebsites")}" 
                data-action="${reverseRoute("google.GoogleGroupController","delTarget","groupId",group.getId())}" />
        </div>                        
    </div>
</div>