{% load datatable_tags %}
{% load ajax_helpers %}
<style>

    .kanban_summary td {
        padding: 2px 5px;
    }

    .kanban_summary div {
        font-size: 10px;
        padding: 8px;
        margin-top: 5px;
        margin-bottom: 5px;

    }

    .kanban_summary h5 {
        font-size: 15px;
        font-weight: bold;
    }

    .kanban_summary h6 {
        font-size: 12px;
    }
</style>


<div class="card report-card">
    <div class="card-header">
        <div class="d-flex align-items-center">
            <h5 class="mr-auto">{{ title }}</h5>

            {% block button_menu %}{{ menus.button_menu.render }}{% endblock %}
        </div>
    </div>
    <div class="dashboard-tile detail">


        <div class="content" style="padding: 2px;">

            <div class="col-xs-12" style="overflow: auto;">
                <table class="table table-bordered kanban_summary">
                    <thead>

                    <tr class="active">
                        {% for heading in headings %}
                            <th class="col-xs-1 text-center" rowspan="{{ heading.row_span }}" colspan="{{ heading.col_span }}">{{ heading.label|safe }}</th>
                        {% endfor %}
                    </tr>

                    <tr class="active">
                        {% for lane in lanes %}
                            {% if lane.multiple %}
                            <th class="col-xs-1 text-center">{{ lane.label|safe }}</th>
                            {% endif %}
                        {% endfor %}
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        {% for lane in lanes %}
                            <td>
                                {{ lane.datatable.render }}
                            </td>
                        {% endfor %}
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
