{% 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">
            <h3>{% translate "Belt Radar" %}</h3>
        </div>
    </div>
{% endblock aabeltradar_header %}

{% block aabeltradar_block %}
    <div class="card">
        <div class="card-body">
            <p>
                {% translate "Belt Radar helps you capture and review mining belt snapshots in a simple workflow." %}
            </p>
            <ol class="mb-0">
                <li>{% translate "Create a new session." %}</li>
                <li>{% translate "Paste or submit your ore survey data to add snapshots to that session via 'Add Survey'." %}</li>
                <li>{% translate "Review your sessions and snapshots, and delete them when you no longer need them." %}</li>
                <li>{% translate "Share your sessions and snapshots with others via your Public ID." %}</li>
            </ol>
        </div>
    </div>
{% 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' %}
{% endblock %}

{% block extra_javascript %}
    <script>
        /**
         * Override settings for Belt Radar
         */
        const aaBeltRadarSettingsOverride = {
        };
    </script>
    {% include 'beltradar/bundles/aa-beltradar-js.html' %}
    {% include 'bundles/datatables-2-js-bs5.html' %}
    {% include 'bundles/datatables-2-columncontrol-js-bs5.html' %}
{% endblock extra_javascript %}