{% extends "layouts/default.html" %}

{% block title %} Manage Customers {% endblock title %}

{% block stylesheets %}

    <link rel="stylesheet" href="/static/assets/css/suggestags.css">

{% endblock stylesheets %}

{% block content %}

    {% if current_user.is_authenticated %}
    {{ form.hidden_tag() }}
        <div class="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col">
                                    <div class="card-title">Customers management</div>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-sm btn-dark float-right ml-2" onclick="refresh_customer_table(true);">
                                        Refresh
                                    </button>
                                    <button class="btn btn-sm btn-dark float-right ml-2" onclick="add_customer();">Add customer</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">

                            <div class="table-responsive" id="customers_table_wrapper">
                                <div class="selectgroup">
                                    <span id="table_buttons"></span>
                                </div>
                                <table class="table display table table-striped table-hover" width="100%"
                                       cellspacing="0" id="customers_table">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Customer ID</th>
                                        <th>Description</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Customer ID</th>
                                        <th>Description</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal" tabindex="-1" role="dialog" id="modal_add_customer" data-backdrop="true">
                <div class="modal-lg modal-dialog" role="document">
                    <div class="modal-content" id="modal_add_customer_content">

                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
        </div>
    {% endif %}

{% endblock content %}

{% block javascripts %}

    <script src="/static/assets/js/iris/manage.customers.js"></script>

{% endblock javascripts %}