{% extends "settings/assets/_layout" %}
{% set selectedNavItem = 'volumes' %}


{% block content %}
    <p id="novolumes"{% if volumes|length %} class="hidden"{% endif %}>
        {{ "No volumes exist yet."|t('app') }}
    </p>

    {% if volumes|length %}
        {% set sortable  = (volumes|length > 1) %}

        <table id="volumes" class="data fullwidth collapsible">
            <thead>
                <th scope="col">{{ "Name"|t('app') }}</th>
                <th scope="col">{{ "Handle"|t('app') }}</th>
                <th scope="col">{{ "Type"|t('app') }}</th>
                {% if sortable %}<td class="thin"></td>{% endif %}
                <td class="thin"></td>
            </thead>
            <tbody>
                {% for volume in volumes %}
                    <tr data-id="{{ volume.id }}" data-uid="{{ volume.uid }}" data-name="{{ volume.name|t('site') }}">
                        <th scope="row" data-title="{{ 'Name'|t('app') }}"><a href="{{ url('settings/assets/volumes/' ~ volume.id) }}">{{ volume.name|t('site') }}</a></th>
                        <td scope="row" data-title="{{ 'Handle'|t('app') }}" class="code">{{ volume.handle }}</td>
                        <td data-title="{{ 'Type'|t('app') }}">
                            {% if volume is missing %}
                                <span class="error">{{ volume.expectedType }}</span>
                            {% else %}
                                {{ volume.displayName() }}
                            {% endif %}
                        </td>
                        {% if sortable %}<td class="thin"><a class="move icon" title="{{ 'Reorder'|t('app') }}" role="button"></a></td>{% endif %}
                        <td class="thin"><a class="delete icon" title="{{ 'Delete'|t('app') }}" role="button"></a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}

    <div class="buttons">
        <a class="btn submit add icon" href="{{ url('settings/assets/volumes/new') }}">{{ "New volume"|t('app') }}</a>
    </div>
{% endblock %}


{% js %}
    var adminTable = new Craft.AdminTable({
        tableSelector: '#volumes',
        noItemsSelector: '#novolumes',
        sortable: true,
        reorderAction: 'volumes/reorder-volumes',
        deleteAction: 'volumes/delete-volume',
        onDeleteItem: function()
        {
            // Hide the Assets tab if that was the last one
            if (adminTable.totalItems == 0)
            {
                $('#nav-assets').remove();
            }
        }
    });
{% endjs %}
