<table id="resultTable" class="table">
    <thead>
        <tr>
            <th style="width: 25%;">Charge Code</th>
            <th style="width: 55%;">Charge Desc</th>
            <th style="width: 20%;" class="text-right">Number Of</th>
        </tr>
    </thead>
    @foreach (var category in Model.Results.Categories)
    {
        <tbody>
            <tr class="category collapsed" data-toggle="collapse" data-target=".@category.ToClassName()">
                <td colspan="3"><span class="icon"></span> @category.Name (@category.Count)</td>
            </tr>
        </tbody>
        @foreach (var countyOrTroop in category.CountiesOrTroops)
        {
            <tbody class="collapse @category.ToClassName()">
                <tr class="county">
                    <td colspan="3">@countyOrTroop.Name (@countyOrTroop.Count)</td>
                </tr>
                @foreach (var detail in countyOrTroop.Details)
                {
                    <tr class="detail">
                        <td class="text-nowrap">@detail.ChargeCode</td>
                        <td>@detail.ChargeDesc</td>
                        <td class="text-right">@detail.Count</td>
                    </tr>
                }
            </tbody>
        }
    }
</table>

@section Scripts {
    <script>
        $(function () {
            /* speed up collapse animations */
            $.support.transition = false;
        })
    </script>
}