<h4 class="pb-2 text-center ">@ViewBag.Title</h4>
<div class="row">
    <table class="table table-striped">
        <thead class="d-none d-md-table-header-group">
            <tr class="bg-primary pt-2 pb-2">
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">Offense</th>
                <th scope="col">Admin</th>
                <th scope="col" class="text-right">Time/Left</th>
            </tr>
        </thead>
        <tbody id="penalty_table" class="border-bottom bg-dark">
            @await Component.InvokeAsync("PenaltyList", new { offset = 0 })
        </tbody>
    </table>
    <table class="table d-table d-md-none">
        <tbody></tbody>
    </table>
    <span id="load_penalties_button" class="oi oi-chevron-bottom text-center text-primary w-100 h3 pb-0 mb-0 d-none d-md-block"></span>
</div>

@section scripts {
    <environment include="Development">
        <script type="text/javascript" src="~/js/penalty.js"></script>
    </environment>
}