{% extends template %} 
{% load static i18n  %} 
{% block content %} 
{% if error_message %}	
    {{error_message}}
{% endif %} 
    <div class="container">
        <div class="row"> <!-- client info -->
            {% if is_inner == False %}
                    {% include 'client_header_info/client_header_info.html' %}
            {% endif %}
        </div> <!-- client info -->
        <div class="row"> <!-- client info -->
            <div class="col-lg-12">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#pendingTab">{% trans 'antares.apps.obligation.templates.panel.pending' %}</a></li>
                    <li><a data-toggle="tab" href="#compliedTab">{% trans 'antares.apps.obligation.templates.panel.complied' %}</a></li>
                </ul>
                <div class="tab-content">
                    <div id="pendingTab" class="tab-pane fade in active">
                        <table  width="100%" id="pendingObligationsTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.type' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.concept_type' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.period' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.due_date' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.status' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.actions' %}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div id="compliedTab" class="tab-pane fade">
                        <table  width="100%" id="compliedObligationsTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.type' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.concept_type' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.period' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.due_date' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.compliance_date' %}</th>
                                    <th>{% trans 'antares.apps.obligation.templates.panel.status' %}</th>
                                     <th>{% trans 'antares.apps.obligation.templates.panel.actions' %}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    var antaresObligationLinks = { 
          obligations_pending_view: "{% url "antares.apps.obligation:panel_ajax_pending_view" %}",
          obligations_complied_view: "{% url "antares.apps.obligation:panel_ajax_complied_view" %}", 
    };
        
    $(document).ready(function() { 
        display_obligations_panel('{{client.id}}');
    });
    </script>
{% endblock %} 

{% block javascript %} 
    {% if is_inner == False %}
        <script type="text/javascript" src="{% static "jquery-ui/jquery-ui.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net/js/jquery.dataTables.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-bs/js/dataTables.bootstrap.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-colreorder/js/dataTables.colReorder.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-fixedcolumns/js/dataTables.fixedColumns.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-keytable/js/dataTables.keyTable.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-responsive/js/dataTables.responsive.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-responsive-bs/js/responsive.bootstrap.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-scroller/js/dataTables.scroller.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-select/js/dataTables.select.js" %}"></script>
	<script type="text/javascript" src="{% static "datatables.net-bs/js/dataTables.bootstrap.js" %}"></script>
    {% endif %} 
    <script type="text/javascript" src="{% static "js/obligation_panel.js" %}"></script>
{% endblock javascript %} 
    
{% block stylesheets %}
    {% if is_inner == False %}
        <link rel="stylesheet" href="{% static "jquery-ui/themes/base/jquery-ui.css" %}">
    <link rel="stylesheet" href="{% static "jquery-ui/themes/base/theme.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-bs/css/dataTables.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-colreorder-bs/css/colReorder.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-fixedcolumns-bs/css/fixedColumns.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-keytable-bs/css/keyTable.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-responsive-bs/css/responsive.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-scroller-bs/css/scroller.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-select-bs/css/select.bootstrap.css" %}">
    <link rel="stylesheet" href="{% static "datatables.net-bs/css/dataTables.bootstrap.css" %}">
    {% endif %} 
{% endblock stylesheets %} 

{% block ng_app_name %}{% endblock ng_app_name %}