@model IEnumerable<PantheonRA.WebApi.Contracts.CalendarEntryType>
@using PantheonRA.BackOffice.Enums

<div class="modal inmodal fade" id="entry-type-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="max-width:480px">
        <div class="modal-content">
            <div class="modal-header timerecord-entrytypemodal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <a href="@Loc.HelpUrl@HelpIds.TimeRecordsButtonDisplaySettings"
                   target="_blank" class="pull-right m-r-sm default-icon-color"><i class="fa fa-question"></i></a>
                <a class="btn-transparent pull-right m-r-sm default-icon-color" href="@SiteHelpAttributeHelper.GetHelpUrl(HelpIds.ExampleTimeRecordsSettings)" target="_blank" title="@Loc.CheckInstructions">
                    <i class="fas fa-book-reader clickable-icon"></i></a>
                <h3 class="text-left">@Loc.ButtonDisplaySettings</h3>
            </div>
            <div class="modal-body" style="padding:10px 30px 30px 30px;">
                <table class="table table-bordered to-panel-table modal-entry-table">
                    <thead>
                        <tr>
                            <th style="width:10%" class="entry-thead-noborder"></th>
                            <th style="width:20%" class="entry-thead-noborder">@Loc.Icon</th>
                            <th style="width:50%" class="entry-thead-noborder">@Loc.Name</th>
                            <th style="width:20%" class="entry-thead-noborder">@Loc.Show</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-body" style="height:272px">
                        @foreach (var item in Model)
                        {
                            <tr class="sortable-row" data-id="@item.AnQid">
                                <td style="width:10.5%" class="text-center entry-type-table-padding">
                                    <i class="fas fa-arrows-v"></i>
                                </td>
                                <td style="width:21%" class="entry-type-table-padding"><i class="fa @item.Icon" style="color:@item.BackgroundColor"></i></td>
                                <td style="width:52.5%" class="entry-type-table-padding">@item.Name</td>
                                <td style="width:20%" class="entry-type-table-checkbox">
                                    <input type="checkbox" id="show-type-checkbox-@item.AnQid" checked="@item.Show">
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" onclick="saveEntryTypeOrder();">@Loc.Save</a>
            </div>
        </div>
    </div>
</div>
