{% extends 'inactivity/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load bootstrap %}

{% block details %}
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">{% translate "Create Request" %}</h3>
        </div>
        <div class="panel-body" style="min-height: 100px;">
            <form role="form" method="POST" action="{% url 'inactivity:create_loa_request' %}">
                {% csrf_token %}
                {{ form|bootstrap }}
                <div class="form-group">
                    <a class="btn btn-default" href="{% url 'inactivity:my_requests' %}">{% translate "Cancel" %}</a>
                    <div class="pull-right">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>

    <script>
        "use strict";
        $(document).ready(function () {
            let params = {
                dateFormat: "yy-mm-dd"
            };
            $( "#id_start" ).datepicker(params);
            $( "#id_end" ).datepicker(params);
        } );
    </script>
{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"  type="text/css">
{% endblock %}

{% block extra_script %}
{% endblock %}
