{% extends 'beltradar/base.html' %}
{% load i18n %}

{% block page_template_title %}
    {{ title }}
{% endblock page_template_title %}

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

{% block aabeltradar_header %}
    <div class="card">
        <div class="card-header bg-primary rounded d-flex align-items-center">
            <div class="me-2">
                {{ delete_session_button|safe }}
            </div>
            <h3>{% translate "Session" %} - {{ session.name }}</h3>
            <div class="ms-auto" id="session-belt-timer"></div>
        </div>
    </div>
{% endblock aabeltradar_header %}

{% block aabeltradar_block %}
    {% include 'beltradar/partials/view-session/session.html' %}
    {% include 'beltradar/partials/view-session/snapshot-table.html' %}
    {% include 'beltradar/partials/view-session/charts.html' %}
{% endblock aabeltradar_block %}


{% block extra_css %}
    {% include 'bundles/datatables-2-css-bs5.html' %}
    {% include 'bundles/datatables-2-columncontrol-css-bs5.html' %}
    {% include 'beltradar/bundles/aa-beltradar-css.html' %}
    {% include 'beltradar/bundles/view-session-css.html' %}
{% endblock %}

{% block extra_javascript %}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        /**
         * Override settings for Belt Radar
         */
        const aaBeltRadarSettingsOverride = {
            dataTables: {
                layout: {
                    topStart: 'pageLength',
                    topEnd: null,
                    bottomStart: [
                        'info',
                        {
                            buttons: [
                                {
                                    text: '{% translate "Export CSV" %}',
                                    className: 'btn-success aa-beltradar-export',
                                    action: function (e, dt, node) {
                                        _exportToCSV(dt, '{{ session }}');
                                    }
                                },
                            ]
                        }
                    ],
                    bottomEnd: 'paging'
                },
            },
            url: {
                surveySessionEntry: "{% url 'beltradar:api:get_snapshot' public_id=session.public_id %}",
                sessionData: "{% url 'beltradar:api:get_session_stats' public_id=session.public_id %}",
                index: "{% url 'beltradar:index' %}",
            },
            translations: {
                loading: "{% translate 'Loading…' %}",
                noData: "{% translate 'No mining chart data available.' %}",
                lastSnapshot: "{% translate 'Last Snapshot' %}",
                firstScan: "{% translate 'First Scan' %}",
                lastScan: "{% translate 'Last Scan' %}",
                etaScan: "{% translate 'Estimated Time' %}",
                etaPassed: "{% translate 'Done' %}",
                miningSpeed: "{% translate 'Mining Speed' %}",
                oreProgression: "{% translate 'Ore Progression' %}",
            }
        };
    </script>
    {% include 'beltradar/bundles/aa-beltradar-js.html' %}
    {% include 'beltradar/bundles/view-session-js.html' %}
    <!-- load modals -->
    {% include 'beltradar/partials/modals/request-accept-delete-session.html' %}
    {% include 'beltradar/partials/modals/request-accept-delete-snapshot.html' %}
    {% include 'beltradar/partials/modals/request-add-snapshot.html' %}
    {% include 'beltradar/partials/modals/request-accept-add-belt-timer.html' %}
    {% include 'beltradar/partials/modals/request-accept-delete-belt-timer.html' %}
{% endblock extra_javascript %}