{% load djicons %}

<div class="p-4">
    {% if items %}
    <div class="datatable">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td>{{ item.name }}</td>
                    <td>
                        {% if item.is_active %}
                        <span class="badge color-success">Active</span>
                        {% else %}
                        <span class="badge color-error">Inactive</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">{% icon "cube-outline" %}</div>
        <h3 class="empty-state-title">No items yet</h3>
        <p class="empty-state-description">Create your first item to get started.</p>
    </div>
    {% endif %}
</div>