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


{% block page_title %}
    {{ title }} ⋗ {% translate "Killstats" %}
{% endblock %}

{% block page_topic %}
    <h1 class="page-header text-center">
        {{ title }}
    </h1>
{% endblock page_topic %}

{% block extra_css %}

{% sri_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 %}
	<!--Killstats-->
	<div class="card bg-primary d-flex flex-row align-items-center justify-content-center mb-2">
		<h3 id="currentMonthLink" class="page-header text-center">Killstats</h3>
		<div class="dropdown px-2">
			<button id="yearDropDownButton" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
				{% now "Y" %}
			</button>
			<ul class="dropdown-menu" id="yearDropdown">
				{% for year in years %}
					<li><a class="dropdown-item" data-bs-year-id="{{ year }}" href="#">{{ year }}</a></li>
				{% endfor %}
			</ul>
		</div>
		<div class="dropdown px-2" id="overview">
			<button id="monthDropDownButton" class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
			{% now "F" %}
			</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" class="px-2"></div>
	</div>

	<!--Modal-->
	{% include 'killstats/partials/modal/modal.html' with name="ViewTop10Killer" %}
	<!--Dashboard-->
	{% include 'killstats/partials/dashboard.html' with stats=stats %}
	<!--Hall-->
	{% include 'killstats/partials/hall.html' with shame=shame fame=fame %}

	<div id="killboard" class="card d-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 %}
{% 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' %}

<script>
	setupModal('#modalViewTop10KillerContainer', 'ajax_url', '#modalViewTop10KillerContent', '#modalViewTop10KillerLoader');
</script>
{% endblock extra_javascript %}

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