{% extends "standingsrequests/base.html" %}
{% load bootstrap %}
{% load staticfiles %}
{% load i18n %}

{% block extra_css %}
    {% include "standingsrequests/bundles/angular.html" %}
{% endblock extra_css %}

{% block page_content %}    
    <div ng-app="standingsApp" ng-controller="GroupsListController">
        <standings-filter-controls></standings-filter-controls>
        <div class="col-lg-12 container">
            <h1 class="page-header">{% trans "Groups" %}</h1>
            <div class="pull-left">
                <p>This data is cached for up to 10 minutes.<br/>
                Last API Update: {{ lastUpdate | date:"SHORT_DATETIME_FORMAT" }}</p>
            </div>            
            <div class="col-lg-12 container">

                <div id="div_spinner" class="row">                    
                    <div class="col-md-12">
                        <img src="{% static 'standingsrequests/Spinner-1s-64px.gif' %}" alt="Spinner"/>
                    </div>
                </div>
                
                <div id="div_results" class="row" style="visibility: hidden">
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover table-striped">
                            
                            <!-- Corporations -->
                            <tr>
                                <th class="col-md-3">{% trans "Corporation" %}</th>
                                <th class="col-md-1">{% trans "Standing" %}</th>
                                <th class="col-md-1">{% trans "Labels" %}</th>
                            </tr>                            
                            {% verbatim %}
                            <tr ng-repeat="entity in corps | filterStandings as corpsFiltered">
                                <td>
                                    <span ng-bind="entity.corporation_name"></span>
                                </td>
                                <td>
                                    <span style="font-size:1.5em;">
                                        <standings-icon standing="entity.standing"></standings-icon>
                                    </span>
                                </td>
                                <td>
                                    <span ng-repeat="label in entity.labels" ng-bind="label"></span>
                                </td>
                            </tr>
                            
                            <tr ng-hide="corpsFiltered.length > 0">
                                <td class="text-muted" colspan="3" style="text-align: left; vertical-align: middle;">
                                Empty
                                </td>
                            </tr>
                            {% endverbatim %}
                            
                        </table>
                        
                        <table class="table table-condensed table-hover table-striped">
                            <!-- Alliances -->
                            <tr>
                                <th class="col-md-3">{% trans "Alliance" %}</th>
                                <th class="col-md-1">{% trans "Standing" %}</th>
                                <th class="col-md-1">{% trans "Labels" %}</th>
                            </tr>                            
                            {% verbatim %}
                            <!-- Should DRY this -->
                            <tr ng-repeat="entity in alliances | filterStandings as alliancesFiltered">
                                <td>
                                    <span ng-bind="entity.alliance_name"></span>
                                </td>
                                <td>
                                    <span style="font-size:1.5em;">
                                        <standings-icon standing="entity.standing"></standings-icon>
                                    </span>
                                </td>
                                <td>
                                    <span ng-repeat="label in entity.labels" ng-bind="label"></span>
                                </td>
                            </tr>

                            <tr ng-hide="alliancesFiltered.length > 0">
                                <td class="text-muted" colspan="3" style="text-align: left; vertical-align: middle;">
                                Empty
                                </td>
                            </tr>

                            {% endverbatim %}
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock page_content %}

{% block extra_javascript %}
    <script type="text/javascript">
        {% include 'standingsrequests/partials/_angular_urls.html' %}
    </script>
    <script src="{% static 'standingsrequests/app.js' %}"></script>
    <script src="{% static 'standingsrequests/standings_filter.js' %}"></script>
    <script src="{% static 'standingsrequests/view_groups.js' %}"></script>
{% endblock extra_javascript %}