{% extends "fleetpings/base.html" %}

{% load i18n %}
{% load fleetpings %}

{% block aa_fleetpings_body %}
    <div class="row">
        <div class="col-md-6">
            <div class="card card-default">
                <div class="card-header aa-fleetpings-ping-header">
                    <span class="card-title">{% translate "Fleet information" %}</span>
                </div>

                <div class="card-body">
                    {% include "fleetpings/partials/form/form.html" %}
                </div>
            </div>
        </div>

        <div class="col-md-6 aa-fleetpings-pingtext">
            <div class="card card-default">
                <div class="card-header aa-fleetpings-ping-header">
                    <span class="card-title">{% translate "Formatted ping text" %}</span>
                </div>

                <div class="card-body">
                    {% include "fleetpings/partials/ping/ping.html" %}
                </div>
            </div>
        </div>

        {% translate "Mandatory information is missing. To create an optimer, you need to provide all of the following information:<br>» FC name<br>» Fleet name<br>» Formup location<br>» Formup time<br>» Ships / Doctrine" as optimerMissingFields %}
        {% translate "Mandatory information is missing. To create an SRP link, you need to provide all of the following information:<br>» Fleet name<br>» Ships / Doctrine" as srpMissingFields %}
        {% translate "Error! Your ping was not copied to your clipboard. Maybe your browser doesn&apos;t support this feature." as copyToClipboardError %}
        {% translate "Success! Your ping text has been copied to your clipboard. Now be a good FC and throw it in your chat so you actually get some people in fleet." as copyToClipboardSuccess %}

        <script>
            const fleetpingsSettings = {
                dateTimeLocale: '{{ LANGUAGE_CODE }}',
                optimerInstalled: {{ optimer_installed|yesno:"true,false" }},
                srpModuleAvailableToUser: {{ srp_module_available_to_user|yesno:"true,false" }},
                url: {
                    fleetPing: '{% url "fleetpings:ajax_create_fleet_ping" %}',
                    pingTargets: '{% url "fleetpings:ajax_get_ping_targets" %}',
                    pingWebhooks: '{% url "fleetpings:ajax_get_webhooks" %}',
                    fleetTypes: '{% url "fleetpings:ajax_get_fleet_types" %}',
                    formupLocations: '{% url "fleetpings:ajax_get_formup_locations" %}',
                    fleetComms: '{% url "fleetpings:ajax_get_fleet_comms" %}',
                    fleetDoctrines: '{% url "fleetpings:ajax_get_fleet_doctrines" %}'
                },
                translation: {
                    optimer: {
                        error: {
                            missingFields: '{{ optimerMissingFields|escapejs }}'
                        }
                    },
                    srp: {
                        error: {
                            missingFields: '{{ srpMissingFields|escapejs }}'
                        }
                    },
                    copyToClipboard: {
                        error: '{{ copyToClipboardError|escapejs }}',
                        success: '{{ copyToClipboardSuccess|escapejs }}'
                    }
                }
            };
        </script>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include "bundles/jquery-datetimepicker-js.html" %}
    {% include "bundles/clipboard-js.html" %}
    {% include "fleetpings/bundles/fleetpings-js.html" %}
{% endblock %}

{% block extra_css %}
    {% include "bundles/jquery-datetimepicker-css.html" %}
    {% include "fleetpings/bundles/fleetpings-css.html" %}
{% endblock %}
