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

{% load django_bootstrap5 %}
{% load i18n %}

{% block page_title %}
{% endblock page_title %}

{% block header_nav_brand %}
    {% translate "Structure Timers" %}
{% endblock header_nav_brand %}

{% block content %}
    <div>
        <h1 class="page-header text-center mb-3">
            {% block page_header %}
            {% endblock page_header %}
        </h1>

        {% include "timerboard/index_button.html" %}

        <div class="card card-primary border-0">
            <div class="card-header">
                <div class="card-title mb-0">
                    {% translate "Structure Timer Details" %}
                </div>
            </div>

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

                            {% bootstrap_form form %}

                            <div class="form-group mt-3 clearfix">
                                <button class="btn btn-primary" type="submit">
                                    {% block submit_button_text %}
                                    {% endblock submit_button_text %}
                                </button>
                            </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 %}
