{% load wnsq_tags %}
{% load staticfiles %}
{% comment %}
generalized snippet to display related (fk) relations
in an object's detail view. using templates must provide the
object list as related_list and the detail url which leads to
the detail view for that particular related object
{% endcomment %}
<script type="text/javascript">
    $(document).ready(function () {
        $('#{{ related_table_id }}').dataTable(
                {
                    "info": false
                }
        );
    });
</script>
{% with rel_count=related_list.count %}
    {% if rel_count %}
        {% comment %}
    since the list isn't empty, we can abuse the first object to lookup
    the verbose plural name of the related object and use this as a label
    for the show/hide button and the table header.
    note that the div id must be reflect the name of the related item, this avoids
    naming conflicts in detail views with more than one related list. for this
    purpose we abuse the class name of the model, which can act as a valid
    html id.
    {% endcomment %}
        {% with rel_name_plural=related_list.first.verbose_name_plural class_name=related_list.first|get_class %}
            <div id="show_rel_{{ class_name }}">
                <table id="{{ related_table_id }}"
                       class="table striped">
                    <thead>
                    <tr>
                        <th>{{ rel_name_plural }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for rel_obj in related_list %}
                        <tr>
                            <td>{{ rel_obj.opts.verbose_name }}<a
                                    href='{% url rel_obj.detail_url pk=rel_obj.id %}'>{{ rel_obj }}</a></td>
                        </tr>
                    {% endfor %}
                    </tbody>

                    <tfoot>
                    <tr>
                        <td>
                            {{ rel_count }} Item{{ rel_count|pluralize }}
                        </td>
                    </tr>
                    </tfoot>

                </table>
            </div>
        {% endwith %}
    {% endif %}
{% endwith %}