Component: Data Tables about stacks HOT 5 CLOSED

<table class="s-table bc-black-2 mt12 s-table__bordered fc-black-700">
            <thead class="bg-black-025 bt bc-black-2 fs-category">
                <tr>
                    <th scope="col" class="bc-black-2">@_s("Source")</th>
                    <th scope="col" class="bc-black-2" colspan="2">@_s("Job listing visits")</th>
                    <th scope="col" class="bc-black-2" colspan="2">@_s("% of total")</th>
                </tr>
            </thead>
            <tbody>
                @{ var maxClicks = Model.Referrers.Max(r => r.ClickCount);}
                @foreach (var referrer in Model.Referrers)
                {
                    var percentage = 100 * referrer.ClickCount / maxClicks;
                    <tr>
                        <td scope="row">@(string.IsNullOrEmpty(referrer.Url) ? _s("Direct URL or no referrer specified") : referrer.Url)</td>
                        <td class="ta-right brw0">@Localize.Numbers.CommaSeparated(referrer.ClickCount)</td>
                        <td class="va-middle blw0" width="116">
                            <div class="s-progress bg-white" id="brandprogress">
                                <div class="s-progress--bar bg-powder-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="@percentage" style="width: @percentage%"></div>
                            </div>
                        </td>
                        <td class="ta-right brw0 pr0">@Localize.Numbers.Percentage(referrer.Percentage)</td>
                        <td class="ps-relative blw0" width="38"><span class="d-inline-block ps-absolute" style="height:28px; width:28px; top: -2px;"><canvas class="js-pie-chart" data-percentage="@((int)Math.Ceiling(referrer.Percentage * 100))"></canvas></span></td>
                    </tr>
                }
            </tbody>
        </table>