@model Node
@functions
{
    string Graph(Volume i, string type)
    {
        <a href="#/dashboard/graph/@Model.Id.UrlEncode()/volumePerformance/@i.Id.UrlEncode()">
            <img class="js-dashboard-spark" src="@Url.Content("~/graph/volumePerformance/")@type.ToLower()/spark?id=@Model.Id&iid=@i.Id" alt="" />
        </a>
        return null;
    }
}
<h5 class="page-header">@Model.Volumes.Count.Pluralize("Volume")</h5>
<table class="table table-striped table-middle table-super-condensed table-responsive table-dashboard text-nowrap js-interfaces">
    <thead>
        <tr>
            <th>Volume</th>
            <th>Read</th>
            <th></th>
            <th>Write</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @{ var j = 0; }
        @foreach (var i in Model.Volumes.OrderBy(i => i.Id))
        {
            <tr class="@i.RowClass()">
                <td class="" title="@i.Name
                    last updated @(i.LastSync?.ToRelativeTime())" data-val="@(j++.ToString())">
                    @i.IconSpan()
                    @i.PrettyName
                </td>
                <td data-val="@(i.ReadBytesPerSecond?.ToString("F0"))">@i.PrettyRead()</td>
                <td data-val="@(i.ReadBytesPerSecond?.ToString("F0"))">@Graph(i, "read")</td>
                <td data-val="@(i.WriteBytesPerSecond?.ToString("F0"))">@i.PrettyWrite()</td>
                <td data-val="@(i.WriteBytesPerSecond?.ToString("F0"))">@Graph(i, "write")</td>
            </tr>
        }
    </tbody>
</table>