{% extends 'allianceauth/base.html' %}
{% load i18n %}
{% load humanize  %}

{% block page_title %}{% trans "Audit!" %}{% endblock %}
{% block extra_css %}
{% include 'bundles/datatables-css.html' %}

<style>
.noheader thead {
  display: none;
}

.flex-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.flex-wrap {
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

.form-control {
  margin: 2px;
}

.flex-middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pannel-hieght-locked {
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
}

.panel-height-locked-large {
  min-height: 600px;
  max-height: 600px;
  overflow-y: auto;
}

.scroll-bar-narrow::-webkit-scrollbar-track {
  border-radius: 5px;
}

.scroll-bar-narrow::-webkit-scrollbar-track-piece {
  background-color: #375a7f;
  border-color: transparent;
  border-width: 7px;
  border-style: solid;
  background-clip: padding-box;
}

.scroll-bar-narrow::-webkit-scrollbar {
  width: 15px;
  border-width: 5px;
  background-color: transparent;
}

.scroll-bar-narrow::-webkit-scrollbar-thumb {
  background-color: #375a7f;
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

.img-pad {
  padding: 5px;
}

table.dataTable tbody td {
  vertical-align: middle;
}

#chartdiv {
  width: 100%;
  height: 500px;
}

tr.group,
tr.group:hover {
  background-color: #3498DB !important;
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}

.lds-spinner div {
  transform-origin: 10px 10px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 3px;
  height: 6px;
  border-radius: 50%;
  background: #5cb85c;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
{% endblock extra_css %}
{% block content %}
    <div class="col-lg-12">
        <div class="col-lg-12 container">
            <br>
            <div class="panel panel-primary">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="{% url 'corptools:view' %}">Account Audit</a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                {% include 'corptools/character/char_menu.html' %}
                            </ul>
                            <ul class="nav navbar-nav pull-right">
                                <li class>
                                    <a href="{% url 'corptools:update_account' main_char.character_id%}"><i class="fas fa-sync"></i></a>
                                </li>
                                <li class>
                                    <a href="{% url 'corptools:add_char' %}">Add Character Token</a>
                                </li>
                                {% if perms.corptools.alliance_corp_manager or perms.corptools.global_corp_manager or perms.corptools.state_corp_manager %}
                                    <li class>
                                        <a href="{% url 'corptools:add_corp' %}">Add Corporate Token</a>
                                    <li>
                                    <li class>
                                        <a href="{% url 'corptools:corp_menu' %}">Corporations</a>
                                    <li>
                                {% endif %}

                            </ul>
                        </div>

                    </div>
                </nav>

                <div class="panel panel-body">
                    <div class="row">
                        <div class="text-center col-md-2">
                            <img class="ra-avatar img-circle" src="{{ main_char.portrait_url_128 }}">
                            <h4>{{ main_char.character_name }}</h4>
                        </div>
                        <div class="text-center col-md-2 hidden-xs hidden-sm">
                            <img class="ra-avatar img-circle" src="{{ main_char.corporation_logo_url_128 }}">
                            <h4>{{ main_char.corporation_name }}</h4>
                        </div>
                        {% if main_char.alliance_id %}
                            <div class="text-center col-md-2 hidden-xs hidden-sm">
                                <img class="ra-avatar img-circle" src="{{ main_char.alliance_logo_url_128 }}">
                                <h4>{{ main_char.alliance_name }}</h4>
                            </div>
                        {% endif %}
                        <div class="col-xs-12 hidden-md hidden-lg"><hr></div>
                        <div class="text-center col-md-6"  rowspan="2">
                            <h4>Linked characters</h4>
                            {% for alt in alts|slice:":30" %}
                        <span rel="tooltip" style="background-color: {% if alt.characteraudit.is_active %}#008844{% else %}#AA0000{% endif %}" class="label label-default">{{ alt.character_name }}</span>
                            {% endfor %}
                            {% if alts.count > 30 %}<span class="label label-default">{{ alts.count|subtract:30 }} More... </span>{% endif %}
                            <br>
                            <span class="label label-default">Total Account ISK: {{ net_worth|intcomma }}</span>
                        </div>
                    </div>
                </div>
            </div>
            {% block ct_block %}{% endblock %}
    </div>
{% endblock %}

{% block extra_script %}
    $(document).ready(function() {
        }
    )
    {% block ct_extra_script %}{% endblock %}

{% endblock %}
