{% extends "allianceauth/base-bs5.html" %}

{% load django_bootstrap5 %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

{% block page_title %}
    {% translate "Create Operation" %}
{% endblock page_title %}

{% block header_nav_brand %}
    {% translate "Fleet Operation Timers" %}
{% endblock header_nav_brand %}

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

{% block content %}
    <div>
        {% translate "Create Fleet Operation" as page_header %}
        {% include "framework/header/page-header.html" with title=page_header %}

        <div class="card card-primary border-0">
            <div class="card-header">
                <div class="card-title mb-0">
                    {% translate "Fleet operation details" %}
                </div>
            </div>

            <div class="card-body">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <form role="form" action="" method="POST">
                            {% csrf_token %}

                            {% bootstrap_form form %}

                            <div class="form-group mt-3 clearfix">
                                {% translate "Create fleet operation" as button_text %}
                                {% bootstrap_button button_class="btn btn-primary" content=button_text %}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block extra_javascript %}
    {% include 'bundles/jquery-datetimepicker-js.html' %}

    <script>
        $(document).ready(() => {
            $('#id_start').datetimepicker({
                setlocale: '{{ LANGUAGE_CODE }}',
                mask: true,
                format: 'Y-m-d H:i',
                minDate: 0
            });
        });
    </script>
{% endblock %}
