{% if formUsage %}
    <table id="formie-audit" class="data fullwidth collapsible formie-table">
        <thead>
            <th>{{ 'Element' | t('formie') }}</th>
            <th>{{ 'Type' | t('formie') }}</th>
            <th>{{ 'Status' | t('formie') }}</th>
            <th>{{ 'Field' | t('formie') }}</th>
        </thead>
        <tbody>
            {% for row in formUsage %}
                <tr class="element-row">
                    <th style="padding-left: {{ (row.level + 1) * 12 }}px;">
                        <a href="{{ row.element.getCpEditUrl() }}">
                            {{ row.element.getChipLabelHtml() | raw }}
                        </a>
                    </th>

                    <td>{{ row.element.displayName() }}</td>

                    {% if row.element.isRevision() %}
                        <td>{{ 'Revision' | t('app') }}</td>
                    {% elseif row.element.isDraft() %}
                        <td>{{ 'Draft' | t('app') }}</td>
                    {% else %}
                        <td>{{ row.element.getStatus() | title }}</td>
                    {% endif %}

                    <td>
                        {% if row.field %}
                            <code>{{ row.field.handle }}</code>
                        {% else %}
                            <i>{{ 'Unknown field' | t('formie') }}</i>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% else %}
    <p>{{ 'This form has not been referenced by another element.' }}</p>
{% endif %}

{% css %}

#formie-audit .element.small {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

#formie-audit .owner-row > :first-child {
    padding-left: 40px !important;
}

{% endcss %}