<div class="table-responsive">
    <table id="contact-table" class="table table-aa">
        <thead>
            <tr>
                <th>Contact</th>
                <th>Contact Type</th>
                <th>Labels</th>
                <th>Standing</th>
                {% if view_notes %}<th>Notes</th>{% endif %}
                {% if view_notes and edit_notes %}<th></th>{% endif %}
            </tr>
        </thead>

        <tbody>
            {% for contact in contacts %}
                <tr>
                    <td>
                        <img src="{{ contact.image_src }}" class="rounded me-2">
                        {{ contact.contact_name }}
                    </td>
                    <td>{{ contact.contact_type }}</td>
                    <td>{% for label in contact.labels.all %}{{ label.label_name }}{% if not forloop.last %}, {% endif %}{% endfor %}</td>
                    <td>{{ contact.standing }}</td>
                    {% if view_notes %}<td>{{ contact.notes }}</td>{% endif %}
                    {% if view_notes and edit_notes %}
                        <td><a href="{% url edit_url contact.pk %}" class="btn btn-outline-success btn-sm"><i class="fa-solid fa-pen"></i></a></td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<script>
    window.onload = function() {
        $('#contact-table').DataTable({
            {% if view_notes and edit_notes %}
            columnDefs: [
                { targets: [5], sortable: false, searchable: false }
            ],
            {% endif %}
            "pageLength": 50,
            filterDropDown: {
                bootstrap: true,
                bootstrap_version: 5,
                columns: [
                    {
                        idx: 1,
                        title: 'Contact Type'
                    },
                    {
                        idx: 2,
                        title: 'Labels'
                    },
                    {
                        idx: 3,
                        title: 'Standing'
                    }
                ]
            }
        });
    };
</script>