
{% if component.mobile %}
    <ul class="list-group collapse in" id="feedList">
    {% for obj in component.get_queryset() %}
        {{ set_request(obj, component.request) }}
        <div>
            <h4>{{ obj }}</h4>
            {% for column_name, lookup, sortable, to in component.column_names %}
                {% with value=obj|getattr(lookup) %}
                    {% if value|displayable %}
                        <div class="text-muted"><i class="fa fa-angle-double-right"></i> <strong>{{ column_name }}</strong>: {{ value|format|safe }}</div>
                    {% endif %}
                {% endwith %}
            {% endfor %}
            <div align="right">{{ paginator_icons(component, obj, True) }}</div>
            <hr width="50%">
        </div>
    {% endfor %}
    </ul>
{% else %}
    {% with queryset=component.get_queryset() %}
    <div class="table-responsive2">
    <table class="table {% if component.qs.model.get_parent_field and component.qs.model.get_parent_field() %}tree{% endif %}" id="dataTable">
        <thead>
            <tr>
                {{ paginator_checkboxes(component, None, True) }}
                {% if component.can_show_actions and not component.request.GET.popup %}
                <th style="vertical-align: top" width="50px">{{ _("Options") }}</th>
                {% endif %}
                {% for column_name, lookup, sortable, to in component.column_names %}
                <th style="vertical-align: top">
                    {% if sortable %}<a href="javascript:" onclick="$('#order_by{{ component.id }}').val('0{{ lookup }}');$('#{{ component.id }}').submit();" class="default-color"><i class="fa fa-sort fa-lg"></i>{% endif %}
                    {{ column_name|normalyze }}
                    {% if sortable %}</a>{% endif %}

                {% if component.order_by == lookup and sortable %} <i class="mdi-hardware-keyboard-arrow-down"></i> {% endif %} </th>
                {% endfor %}
                {% if component.drop_down.has_inline_action and not component.readonly and not component.request.GET.popup %}
                <th style="text-align: center" class="paginator-actions">{{ _("Actions") }}</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for obj in queryset %}
                {{ set_request(obj, component.request) }}
                <tr class="{{ tree_info(obj, queryset) }}">
                    {{ paginator_checkboxes(component, obj, True) }}
                    {% if component.can_show_actions and not component.request.GET.popup %}
                    <td align="center" style="vertical-align: middle" nowrap class="action-links">
                        {{ paginator_icons(component, obj) }}
                    </td>
                    {% endif %}
                    {% for column_name, lookup, sortable, to in component.column_names %}
                        {% with value=obj|getattr(lookup) %}
                        <td style="text-align: {{ value|align }};vertical-align: middle">{{ value|format|safe }}</td>
                        {% endwith %}
                    {% endfor %}
                    {% if component.drop_down.has_inline_action and not component.readonly and not component.request.GET.popup %}
                    <td class="paginator-actions" align="center" style="vertical-align: middle"> {{ add_actions(component, obj) }}
                    {{ component.drop_down|safe }} </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% endwith %}
{% endif %}
