@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="missingGrid" class="dataTablesGrid hidden-grid">
        <thead>
            <tr>
                <th>
                    Series Title
                </th>
                <th>
                    Episode
                </th>
                <th>
                    Episode Title
                </th>
                <th>
                    AirDate
                </th>
                @*Commands Column*@
                <th/>
                    
                
                @*Details Column*@
                <th style="display: none;">
                    Details
                </th>
            </tr>
        </thead>
        <tbody>
            @*@foreach(var history in Model)
            {
                Html.RenderPartial("History", history);
            }*@
        </tbody>
    </table>
</div>
@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function() {
            $('#missingGrid').removeClass('hidden-grid');

            oTable = $('.dataTablesGrid').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) {
                                    var link = '@Ajax.ImageActionLink("../../Content/Images/Search.png", new {  title = "Search for Episode", alt = "Search", @class = "gridAction" }, "Search", "Episode", new { episodeId = "REPLACE" }, null, null)';
                                    link = link.replace("REPLACE", row.aData["EpisodeId"]);
                                    return link;
                                }
                            }, //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>
}