<br/>

<div root-access>
    <div class="alert alert-info" ng:show="raid.length == 0" translate>No array detected!</div>
    <table class="table" ng:show="raid.length > 0">
        <tr>
            <th translate>Name</th>
            <th translate>State</th>
            <th translate>Type</th>
            <th translate>Devices</th>
            <th translate>Blocks</th>
            <th translate>Metadata</th>
        </tr>
        <tr ng:repeat="raid_array in raid">
            <td>
                {{raid_array.name}}
                <br />
                <div class="text-danger" ng:show="raid_array.devices_down">
                    <span translate>Devices down: </span> {{raid_array.devices_down}}
                </div>
                <div class="text-success" ng:show="raid_array.recovery">
                    <span translate>Progress: </span> {{raid_array.recovery_progress}}%
                    <br />
                    <span translate>Remaining: </span> {{raid_array.recovery_remaining}}
                    <br />
                    <span translate>Speed: </span> {{raid_array.recovery_speed}}
                </div>
            </td>
            <td>{{raid_array.state}}</td>
            <td>{{raid_array.type}}</td>
            <td>
                <div ng:repeat="device in raid_array.devices">
                    <div style="display:inline-block; width:15px;margin-right:10px;">
                        <i class="fas fa-fw fa-check text-success" ng:show="device.up"></i>
                        <i class="fas fa-fw fa-times text-danger" ng:show="device.failed"></i>
                        <i class="far fa-fw fa-star text-primary" style="width:15px;" ng:show="device.spared"></i>
                    </div>
                    <span>{{device.name}}</span>
                </div>
            </td>
            <td>
                {{raid_array.blocks}}
                <br />
                ({{raid_array.size}} GiB)
            </td>
            <td>
                <div ng:show="raid_array.superblock">
                    <span translate>Superblock: </span>{{raid_array.superblock}}
                </div>
                <div ng:show="raid_array.chunk">
                    <span translate>Chunk: </span>{{raid_array.chunk}}
                </div>
            </td>
        </tr>
    </table>
</div>
