{% if accidents %}
<div class="row justify-content-center ml-3 pr-0">
    <div class="col-md-12 pr-0">
        <div class="card">
            <div class="card-body pt-0 pb-0">
                <div id="accordion" role="tablist" aria-multiselectable="true" class="card-collapse">
                    <div class="card card-plain">
                        <div class="card-header pl-0" id="headingOne">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <h4 class="mb-0">Accidents
                                <i class="tim-icons icon-minimal-down"></i></h4>
                            </a>
                        </div>
                        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                            <div class="card-body pl-0 pt-0 pr-0">
                                <table class="table table-striped table-condensed tablesorter mb-1">
                                    <thead>
                                        <tr>
                                            <th style="width: 3%"></th>
                                            <th class="header text-left" style="width: 8%">Date</th>
                                            <th class="header text-left" style="width: 89%">Skill</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for accident in accidents %}
                                        <tr>
                                            <td class="text-left">
                                                <a href="{% url 'accident_update' accident.id %}">
                                                    &nbsp;<span class="tim-icons icon-pencil text-warning"></span>
                                                </a>
                                            </td>
                                            <td class="text-center"><a href="{% url 'accident_details' accident.id %}">{{ accident.date | date:"d-m-Y" }}</a></td>
                                            <td class="text-left"><a href="{% url 'skill_details' accident.educative.id %}">{{ accident.educative }}</a></td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
            </div>
            <div class="card-footer text-right text-muted pt-0 pr-0">
                <a href="{% url 'accident_create' %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="tim-icons icon-simple-add"></i>
                    </button>
                </a>
            </div> 
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('[data-sort="table"]').tablesorter({
            headers: {
                0: { sorter: false },
            },
            // dateFormat: "uk",
            sortList: [[1,0]]
        })
    });
</script>

{% endif %}