{% 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">
            <h2 class="page-header">
                {% trans "Groups" %} ({{groups_count|default:"-"}})
            </h2>
            {% include "standingsrequests/partials/_contacts_legend.html" %}                        
            <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">
                    
                    <h3>Corporations</h3>
                    
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover table-striped">
                            
                            <!-- Corporations -->
                            <tr>
                                <th class="col-md-2">{% trans "Name" %}</th>
                                <th class="col-md-2">{% trans "Alliance" %}</th>
                                <th class="col-md-2">{% trans "Main Character" %}</th>
                                <th class="col-md-1">{% trans "Standing" %}</th>
                                <th class="col-md-1">{% trans "Scopes" %}</th>
                                <th class="col-md-1">{% trans "State" %}</th>
                                <th class="col-md-1">{% trans "Labels" %}</th>
                            </tr>                            
                            {% verbatim %}
                            <tr ng-repeat="entity in corps | filterStandings as corpsFiltered">                                
                                <td>
                                    <img ng-src="{{ entity.corporation_icon_url }}" class="img-circle"/>&nbsp;&nbsp;
                                    {{ entity.corporation_name }}
                                </td>
                                <td>
                                    {{ entity.alliance_name }}
                                </td>
                                <td>
                                    <img ng-src="{{ entity.main_character_icon_url }}" class="img-circle"/>&nbsp;&nbsp;
                                    <span ng-show="entity.main_character_ticker">
                                        [{{ entity.main_character_ticker }}]
                                    </span>                                    
                                    <span ng-show="entity.main_character_name">
                                        {{ entity.main_character_name }}
                                    </span>
                                </td>
                                <td>
                                    <span style="font-size:1.5em;">
                                        <standings-icon standing="entity.standing"></standings-icon>
                                    </span>
                                </td>
                                <td>
                                    <bool-checkmark value="entity.has_required_scopes" true-title="Has required scopes" false-title="Missing required scopes"></bool-checkmark>
                                </td>
                                 <td>
                                    {{entity.state}}
                                </td>
                                <td>
                                    <span ng-repeat="label in entity.labels | orderBy">
                                        {{ label }}
                                        <span ng-show="!$last">,&nbsp;</span>
                                    </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>
                        
                        <h3>Alliances</h3>

                        <table class="table table-condensed table-hover table-striped">
                            <!-- Alliances -->
                            <tr>
                                <th class="col-md-6">{% trans "Name" %}</th>
                                <th class="col-md-3">{% 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>
                                    <img ng-src="{{ entity.alliance_icon_url }}" class="img-circle"/>&nbsp;&nbsp;{{ entity.alliance_name }}
                                </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 | orderBy">
                                        {{ label }}
                                        <span ng-show="!$last">,&nbsp;</span>
                                    </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 %}
