<h1>{{ "Volumes"|t('app') }}</h1>
<table class="data fullwidth collapsible">
    <thead>
    <tr>
        <th>
            <div class="field checkboxvolume">
                <input type="checkbox" id="allVolumes" class="checkbox" name="allVolumes" value="all"><label for="allVolumes">&zwnj;</label>
                {{ "Name"|t('app') }}
            </div>
        </th>
        <th>{{ "Handle"|t('app') }}</th>
        <th>{{ "Type"|t('app') }}</th>
    </tr>
    </thead>
    <tbody class="volumes">
    {% for volume in craft.app.volumes.getAllVolumes() %}
        {% set utilizedFields = {} %}
        {% for volumeTab in volume.getFieldLayout().getTabs() %}
            {% for tabField in volumeTab.getFields() %}
                {% set utilizedFields = utilizedFields | merge([tabField.id]) %}
            {% endfor %}
        {% endfor %}
        <tr class="volume" data-id="{{ volume.id }}" data-name="{{ volume.name }}" data-fields="{% for id in utilizedFields %}{{ id }} {% endfor %}">
            <th scope="row">
                <input type="checkbox" id="volume{{ volume.id }}" class="checkbox" name="volumeSelection[]" value="{{ volume.id }}"> <label for="volume{{ volume.id }}">{{ volume.name }}</label>
            </th>
            <td>
                <code>{{ volume.handle }}</code>
            </td>
            <td>
                {{ className(volume) }}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>