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

{% block page_title %} Killstats - Killmail Index {% endblock %}


{% block extra_css %}
<link rel="stylesheet" type="text/css" href="/static/killstats/css/cards.css">
<style>
@media all {
    #kills th, #losses th,
    #kills td, #losses td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }

    #kills thead th, #losses thead th {
        vertical-align: bottom;
        border-bottom: 2px solid #dee2e6;
    }

    #kills tr, #losses tr {
        border-bottom: 1px solid #dee2e6;
    }

}
</style>
{% endblock extra_css %}

{% block killstats_block %}
	<!--Modal-->
	{% include 'killstats/partials/modal.html' with name="ViewTop10Killer" %}
	<!--Dashboard-->
	{% include 'killstats/partials/dashboard.html' with stats=stats %}
	<br>
	<!--Killstats-->
	<div class="card bg-primary d-flex flex-row align-items-center justify-content-center">
		<h3 id="currentMonthLink" class="page-header text-center">Killstats - {{ value|current_month }}</h3>
		<div class="dropdown px-2" id="overview">
			<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
			Month
			</button>
			<ul class="dropdown-menu" id="monthDropdown">
				<li><a class="dropdown-item" data-bs-month-id="1" href="#">{% trans "January" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="2" href="#">{% trans "February" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="3" href="#">{% trans "March" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="4" href="#">{% trans "April" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="5" href="#">{% trans "May" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="6" href="#">{% trans "June" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="7" href="#">{% trans "July" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="8" href="#">{% trans "August" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="9" href="#">{% trans "September" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="10" href="#">{% trans "October" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="11" href="#">{% trans "November" %}</a></li>
				<li><a class="dropdown-item" data-bs-month-id="12" href="#">{% trans "December" %}</a></li>
			</ul>
		</div>
		<div id="top10"></div>
	</div>
	<br>
	{% include 'killstats/partials/stats.html' %}
	<!--Hall-->
	{% include 'killstats/partials/hall.html' with shame=shame fame=fame %}
	<br>
	<div id="killboard" class="card" style="display: none;">
		<div class="rounded-top">
			<ul class="nav nav-tabs" id="killstats-killmail">
				<li class="nav-item">
					<a class="nav-link bg-secondary rounded-top active" href="#tab-kills" data-bs-toggle="tab" data-bs-target="#tab-kills" >
						Kills
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link bg-secondary rounded-top" href="#tab-losses" data-bs-toggle="tab" data-bs-target="#tab-losses">
						Losses
					</a>
				</li>
			</ul>
		</div>
		<div class="panel panel-default panel-tabs">
			<div class="panel-body">
				<div class="card-body bg-secondary tab-content">
					{% include 'killstats/partials/kills.html' %}
					{% include 'killstats/partials/losses.html' %}
				</div>
			</div>
		</div>
	</div>
{% endblock killstats_block %}

{% block extra_javascript %}
<script type="application/javascript">
    $('#modalViewTop10KillerContainer').on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget)
        let ajax_url = button.data('ajax_url');

        $("#modalViewTop10KillerContent").load(ajax_url)
    });
</script>

<script type="application/javascript">
    let corporationsettings = {
        corporation_pk: {{ corporation_pk }},
        alliance_pk: {{ alliance_pk }},
    };
</script>
{% include 'bundles/datatables-js-bs5.html' %}
{% include "bundles/moment-js.html" with locale=True %}

{% include "bundles/filterdropdown-js.html" %}
{% include 'killstats/bundles/killboard-js.html' %}

{% endblock extra_javascript %}

{% block extra_script %}
{% endblock extra_script %}
