{% extends 'corputils/base.html' %}
{% load i18n %}
{% load humanize %}
{% block member_data %}
    {% if corpstats %}
        <div class="row">
            <div class="col-lg-12 text-center">
                <table class="table">
                    <tr>
                        <td class="text-center col-lg-6{% if corpstats.corp.alliance %}{% else %}col-lg-offset-3{% endif %}">
                                <img class="ra-avatar" src="{{ corpstats.corp.logo_url_64 }}">
                            </td>
                        {% if corpstats.corp.alliance %}
                            <td class="text-center col-lg-6">
                                <img class="ra-avatar" src="{{ corpstats.corp.alliance.logo_url_64 }}">
                            </td>
                        {% endif %}
                    </tr>
                    <tr>
                        <td class="text-center"><h4>{{ corpstats.corp.corporation_name }}</h4></td>
                        {% if corpstats.corp.alliance %}
                            <td class="text-center"><h4>{{ corpstats.corp.alliance.alliance_name }}</h4></td>
                        {% endif %}
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <ul class="nav nav-pills pull-left">
                            <li class="active"><a href="#mains" data-toggle="pill">{% trans 'Mains' %} ({{ total_mains }})</a></li>
                            <li><a href="#members" data-toggle="pill">{% trans 'Members' %} ({{ corpstats.member_count }})</a></li>
                            <li><a href="#unregistered" data-toggle="pill">{% trans 'Unregistered' %} ({{ unregistered.count }})</a></li>
                        </ul>
                        <div class="pull-right hidden-xs">
                            {% trans "Last update:" %} {{ corpstats.last_update|naturaltime }}&nbsp;
                            <a class="btn btn-success" type="button" href="{% url 'corputils:update' corpstats.corp.corporation_id %}" title="Update Now">
                                <span class="glyphicon glyphicon-refresh"></span>
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="mains">
                                {% if mains %}
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="table-mains">
                                            <thead>
                                                <tr>
                                                    <th style="height:1em;"><!-- Must have text or height to prevent clipping --></th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for id, main in mains.items %}
                                                    <tr>
                                                        <td class="text-center" style="vertical-align:middle">
                                                            <div class="thumbnail"
                                                                 style="border: 0 none; box-shadow: none; background: transparent;">
                                                                <img src="{{ main.main.portrait_url_64 }}" class="img-circle">
                                                                <div class="caption text-center">
                                                                    {{ main.main }}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <table class="table table-hover">
                                                                {% for alt in main.alts %}
                                                                    {% if forloop.first %}
                                                                        <tr>
                                                                            <th></th>
                                                                            <th class="text-center">{% trans "Character" %}</th>
                                                                            <th class="text-center">{% trans "Corporation" %}</th>
                                                                            <th class="text-center">{% trans "Alliance" %}</th>
                                                                            <th class="text-center"></th>
                                                                        </tr>
                                                                    {% endif %}
                                                                    <tr>
                                                                        <td class="text-center" style="width:5%">
                                                                            <div class="thumbnail" style="border: 0 none; box-shadow: none; background: transparent;">
                                                                                <img src="{{ alt.portrait_url_32 }}" class="img-circle">
                                                                            </div>
                                                                        </td>
                                                                        <td class="text-center" style="width:30%">{{ alt.character_name }}</td>
                                                                        <td class="text-center" style="width:30%">{{ alt.corporation_name }}</td>
                                                                        <td class="text-center" style="width:30%">{{ alt.alliance_name }}</td>
                                                                        <td class="text-center" style="width:5%">
                                                                            <a href="https://zkillboard.com/character/{{ alt.character_id }}/"
                                                                               class="label label-danger" target="_blank">
                                                                                {% trans "Killboard" %}
                                                                            </a>
                                                                        </td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </table>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="tab-pane fade" id="members">
                                {% if members %}
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="table-members">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th class="text-center">{% trans "Character" %}</th>
                                                    <th class="text-center"></th>
                                                    <th class="text-center">{% trans "Main Character" %}</th>
                                                    <th class="text-center">{% trans "Main Corporation" %}</th>
                                                    <th class="text-center">{% trans "Main Alliance" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for member in members %}
                                                    <tr>
                                                        <td><img src="{{ member.portrait_url }}" class="img-circle"></td>
                                                        <td class="text-center">{{ member }}</td>
                                                        <td class="text-center"><a
                                                                href="https://zkillboard.com/character/{{ member.character_id }}/"
                                                                class="label label-danger"
                                                                target="_blank">{% trans "Killboard" %}</a></td>
                                                        <td class="text-center">{{ member.character_ownership.user.profile.main_character.character_name }}</td>
                                                        <td class="text-center">{{ member.character_ownership.user.profile.main_character.corporation_name }}</td>
                                                        <td class="text-center">{{ member.character_ownership.user.profile.main_character.alliance_name }}</td>
                                                    </tr>
                                                {% endfor %}
                                                {% for member in unregistered %}
                                                    <tr class="danger">
                                                        <td><img src="{{ member.portrait_url }}" class="img-circle"></td>
                                                        <td class="text-center">{{ member.character_name }}</td>
                                                        <td class="text-center"><a
                                                                href="https://zkillboard.com/character/{{ member.character_id }}/"
                                                                class="label label-danger"
                                                                target="_blank">{% trans "Killboard" %}</a></td>
                                                        <td class="text-center"></td>
                                                        <td class="text-center"></td>
                                                        <td class="text-center"></td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="tab-pane fade" id="unregistered">
                                {% if unregistered %}
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="table-unregistered">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th class="text-center">{% trans "Character" %}</th>
                                                    <th class="text-center"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for member in unregistered %}
                                                    <tr class="danger">
                                                        <td><img src="{{ member.portrait_url }}" class="img-circle"></td>
                                                        <td class="text-center">{{ member.character_name }}</td>
                                                        <td class="text-center">
                                                            <a href="https://zkillboard.com/character/{{ member.character_id }}/"
                                                               class="label label-danger"
                                                               target="_blank">
                                                                {% trans "Killboard" %}
                                                            </a>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}
{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
{% endblock %}
{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
{% endblock %}
{% block extra_script %}
    $(document).ready(function(){
        $('#table-mains').DataTable({
            "columnDefs": [
                { "sortable": false, "targets": [1] },
            ],
        });
        $('#table-members').DataTable({
            "columnDefs": [
                { "searchable": false, "targets": [0, 2] },
                { "sortable": false, "targets": [0, 2] },
            ],
            "order": [[ 1, "asc" ]],
        });
        $('#table-unregistered').DataTable({
            "columnDefs": [
                { "searchable": false, "targets": [0, 2] },
                { "sortable": false, "targets": [0, 2] },
            ],
            "order": [[ 1, "asc" ]],
        });

    });
{% endblock %}
