{% 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 %}
                {{ create_form|bootstrap }}
                <div class="form-group">
                    <div class="pull-right">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

{% block extra_javascript %}
{% include 'bundles/datatables-js.html' %}
<script type="application/javascript">

    let loaSettings = {
        listRequestsUrl: '{% url "inactivity:list_loa_requests" %}',
        approveRequestUrl:'{% url "inactivity:approve_loa_request" request_id=12345 %}',
        cancelRequestUrl:'{% url "inactivity:cancel_loa_request" request_id=12345 %}',
        csrfToken: '{% csrf_token %}',
    };

</script>
<script type="application/javascript" src="{% static 'inactivity/js/loa_request_list.js' %}" ></script>
<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>
  $( function() {
    $( "#id_start" ).datepicker();
    $( "#id_end" ).datepicker();
  } );
  </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 %}
