{% extends "structuretimers/base.html" %}
{% load bootstrap %}
{% load static %}
{% load i18n %}

{% block details %}
    <div class="panel panel-default" style="margin-top: 1rem;">
        <div class="panel-heading">
            <div class="panel-title">
                {% translate "Timer Information" %}
            </div>
        </div>

        <div class="panel-body">
            <div class="col-md-8 col-md-offset-2">
                {% if form.errors %}
                    <p class="text-danger">
                        <i class="fas fa-exclamation-triangle"></i>
                        <strong>{% translate "Please correct the input errors below" %}</strong>
                    </p>
                {% endif %}

                <form id="add-timer-form" class="form-signin" role="form" action="" method="POST">
                    {% csrf_token %}
                    {{ form|bootstrap }}
                    <br>

                    <p>
                        <i class="fas fa-asterisk"></i> {% translate "required fields" %}
                    </p>

                    <button class="btn btn-primary" type="submit">
                        {% block submit_button_text %}{% endblock %}
                    </button>

                    {% include 'structuretimers/partials/cancel_button.html' %}
                </form>
            </div>
        </div>
    </div>

    <!-- share data with JS part -->
    <div
        id="dataExport"
        data-select2SolarSystemsUrl="{% url 'structuretimers:select2_solar_systems' %}"
        data-select2StructureTypesUrl="{% url 'structuretimers:select2_structure_types' %}">
    </div>
    {{ NIGHT_MODE|json_script:"night-mode-data" }}
    {{ LANGUAGE_CODE|json_script:"language-code-data" }}

{% endblock details %}

{% block extra_css %}
    <link href="{% static 'structuretimers/vendor/select2-4.1.0-beta.1/select2.min.css' %}" rel="stylesheet">
    <link href="{% static 'structuretimers/vendor/select2-bootstrap-theme-0.1.0-beta.10/select2-bootstrap.min.css' %}" rel="stylesheet">
    {% include "bundles/jquery-datetimepicker-css.html" %}
    <link href="{% static 'structuretimers/css/timer_edit.css' %}" rel="stylesheet">
{% endblock extra_css %}

{% block extra_javascript %}
    <script src="{% static 'structuretimers/vendor/select2-4.1.0-beta.1/select2.min.js' %}"></script>
    {% include "bundles/jquery-datetimepicker-js.html" %}
    <script src="{% static 'structuretimers/js/timer_edit.js' %}"></script>
{% endblock extra_javascript %}
