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

{% block details %}
    <div class="card card-primary">
        <div class="card-body" style="min-height: 100px;">
            <h5 class="card-title">Create Request</h5>
            <form role="form" method="POST" action="{% url 'inactivity:create_loa_request' %}">
                {% csrf_token %}
                {{ form|bootstrap }}
                <div class="d-flex justify-content-between">
                    <a class="btn btn-secondary float-left" href="{% url 'inactivity:my_requests' %}">
                        {% translate "Cancel" %}
                    </a>
                    <button type="submit" class="btn btn-primary float-right">
                        Submit
                    </button>
                </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 %}