@model String
@using NzbDrone.Common
@using NzbDrone.Web.Helpers
@using NzbDrone.Web.Models;
@{ViewBag.Title="Missing";}
@section HeaderContent
{
    @Html.IncludeCss("Grid.css")
}
@section ActionMenu{
    <ul class="sub-menu">
        <li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null, null)</li>
        <li>@Ajax.ActionLink("Start Backlog Search", "BacklogSearch", "Command", null, null, new { title = "Backlog search for ALL missing episodes" })</li>
        <li>@Ajax.ActionLink("Start Recent Backlog Search", "RecentBacklogSearch", "Command", null, null, new { title = "Backlog search for missing episodes that aired in the last 30 days only" })</li>
    </ul>
}

<div class="grid-container">
    <table id="historyGrid" class="hidden-grid">
        <thead>
            <tr>
                <th>Series Title</th>
                <th>Episode</th>
                <th>Episode Title</th>
                <th>AirDate</th>
        
                @*Commands Column*@
                <th>Actions</th>
            
                @*Details Column*@
                <th style="display: none;">Details</th>
            </tr>
        </thead>
        <tbody>
            @*@foreach(var history in Model)
            {
                Html.RenderPartial("History", history);
            }*@
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#historyGrid').removeClass('hidden-grid');

        oTable = $('#historyGrid').dataTable({
            //"sAjaxSource": "History/AjaxBinding",
            //"bProcessing": true,
            "bShowAll": false,
            "aaData": @Html.Raw(Model),
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": false,
            "iDisplayLength": 20,
            "sPaginationType": "four_button",
            "aoColumns": [
                            { sWidth: 'auto', "mDataProp": "SeriesTitle" }, //Series Title
                            { sWidth: '80px', "mDataProp": "EpisodeNumbering", "bSortable": false }, //EpisodeNumbering
                            { sWidth: 'auto', "mDataProp": "EpisodeTitle", "bSortable": false }, //Episode Title
                            { sWidth: '150px', "mDataProp": function (source, type, val) {
                                                                    // 'display' and 'filter' use our fancy naming
                                                                    if (type === 'display' || type === 'filter') {
                                                                        return source["AirDateString"];
                                                                    }
                                                                    // 'sort' and 'type' both just use the raw data
                                                                    return source["AirDate"];
                                                                } 
                            }, //Grabbed On
                            { sWidth: '40px', "mDataProp": "EpisodeId", "bSortable": false, "fnRender": function (row) {
                                    return createImageAjaxLink('/Episode/Search?episodeId=' + row.aData["EpisodeId"], '../../Content/Images/Search.png', 'Search', 'Search for Episode', 'searchImage');
                                }
                            }, //Actions
                            { sWidth: 'auto', "mDataProp": "Details", "bSortable": false, "bVisible": false, "fnRender": function (row) {
                                var result = "<b>Overview: </b>" + row.aData["Overview"] + "<br/>";
                                    return result;
                                }
                            } //Details
                        ],
            "aaSorting": [[3, 'desc']]
        });
    });
</script>