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

{% block details %}
    <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation">
            <a href="#tab_{{ ExtractionsCategory.UPCOMING }}" aria-controls="tab_{{ ExtractionsCategory.UPCOMING }}" role="tab" data-toggle="tab">Upcoming Extractions</a>
        </li>
        <li role="presentation"><a href="#tab_{{ ExtractionsCategory.PAST }}" aria-controls="tab_{{ ExtractionsCategory.PAST }}" role="tab" data-toggle="tab">Past Extractions</a></li>
    </ul>

    <div class="panel panel-default panel-tabs">
        <div class="panel-body">
            <div class="tab-content">
                {% include "moonmining/partials/extractions_tab.html" with category=ExtractionsCategory.UPCOMING %}
                {% include "moonmining/partials/extractions_tab.html" with category=ExtractionsCategory.PAST %}
            </div>
            {% include 'moonmining/partials/value_estimate_legend.html' %}
            <p class="text-muted">All times displayed are EVE/UTC • Extractions will be shown on the upcoming tab until {{ stale_hours }} hours after their ready time.</p>
        </div>
    </div>

    <!-- Modals -->
    {% include "moonmining/modals/base.html" with modal_id="modalMoonDetails" modal_content_id="modalMoonDetailsContent" %}
    {% include "moonmining/modals/base.html" with modal_id="modalExtractionDetails" modal_content_id="modalExtractionDetailsContent" %}
    {% include "moonmining/modals/base.html" with modal_id="modalExtractionLedger" modal_content_id="modalExtractionLedgerContent" modal_size="modal-xl" %}
{% endblock %}

{% block extra_javascript %}
    {{ block.super }}
    <script type="text/javascript">
        $(function() {
            var def = {
                ajax: {
                    url: '',
                    dataSrc: '',
                    cache: true
                },
                columns: [
                    {
                        data: 'chunk_arrival_at',
                        render: { _: 'display', sort: 'sort'}
                    },
                    {
                        data: 'refinery',
                        render: { _: 'display', sort: 'sort'}
                    },
                    {
                        data: 'location',
                        render: { _: 'display', sort: 'sort'}
                    },
                    {
                        data: 'labels'
                    },
                    {
                        data: 'volume',
                        render: $.fn.dataTable.render.number(',', '.', 0)
                    },
                    {
                        data: 'value',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    {
                        data: 'mined_value',
                        render: $.fn.dataTable.render.formatisk()
                    },
                    { data: 'details' },

                    { data: 'corporation_name' },
                    { data: 'alliance_name' },
                    { data: 'status_str' },
                    { data: 'moon_name' },
                    { data: 'region_name' },
                    { data: 'constellation_name' },
                    { data: 'rarity_class' },
                ],
                lengthMenu: DEFAULT_LENGTH_MENU,
                pageLength: DEFAULT_PAGE_LENGTH,
                columnDefs: [
                    { "orderable": false, "targets": [ 7 ] },
                    { "visible": false, "targets": [ 8, 9, 10, 11, 12, 13, 14 ] },
                ],
                filterDropDown: {
                    columns: [
                        {
                            idx: 9,
                            title: "Alliance"
                        },
                        {
                            idx: 8,
                            title: "Corporation"
                        },
                        {
                            idx: 12,
                            title: "Region"
                        },
                        {
                            idx: 13,
                            title: "Constellation"
                        },
                        {
                            idx: 14,
                            title: "Rarity"
                        },
                        {
                            idx: 11,
                            title: "Moon"
                        },
                        {
                            idx: 10,
                            title: "Status"
                        }
                    ],
                    bootstrap: true,
                    autoSize: false
                },
                footerCallback: function (row, data, start, end, display) {
                    var api = this.api(), data;

                    dataTableFooterSumColumn(api, 4);
                    dataTableFooterSumColumn(api, 5, 'isk');
                    dataTableFooterSumColumn(api, 6, 'isk');
                }
            };

            /* upcoming extractions*/
            def.ajax.url = '{% url "moonmining:extractions_data" ExtractionsCategory.UPCOMING %}'
            def.order = [ [0, "asc"] ]
            var table = $('#table_{{ ExtractionsCategory.UPCOMING }}').DataTable(def);

            /* past extractions */
            def.ajax.url = '{% url "moonmining:extractions_data" ExtractionsCategory.PAST %}'
            def.order = [ [0, "desc"] ]
            var table = $('#table_{{ ExtractionsCategory.PAST }}').DataTable(def);

            $('#myTabs a[href="#tab_{{ ExtractionsCategory.UPCOMING }}"]').tab('show')

            handle_modal_events("modalMoonDetails", "modalMoonDetailsContent")
            handle_modal_events("modalExtractionDetails", "modalExtractionDetailsContent")
            handle_modal_events("modalExtractionLedger", "modalExtractionLedgerContent")
        });

    </script>
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <link href="{% static 'moonmining/css/extractions.css' %}" type="text/css" rel="stylesheet">
{% endblock %}

{% block extra_script %}
{% endblock %}
