@using PantheonRA.BackOffice.Models
@model PantheonRA.BackOffice.Models.BaseGridFilterModel
@{
    ViewBag.Title = Loc.ZipCodes;
}

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Products/_CodeListTabNavigation.cshtml")
        <div class="tab-content">
            <div class="row buttons-tabbed">
                @Html.Partial("_GridButtons", new GridButtonsViewModel {
                    AddButton = new PantheonRA.BackOffice.Models.FormButton{
                        Url = Url.Action("Create", "Post"),
                        Icon = "fa fa-plus",
                        Text = Loc.NewPostNumber
                    }
                })
            </div>

            <div class="row document-head">
                <div class="col-md-3">
                    <div class="form-group">
                        <label class="control-label">@Loc.SearchFilter</label>
                        @Html.TextBoxFor(model => model.Keywords, new { @id = "Keywords", @class = "form-control search-input", @placeholder = Loc.Search, autocomplete = "off" })
                    </div>
                </div>
            </div>

            <div class="texts-list project-list">
                <div class="document-list document-list-no-footer">
                    <table id="mainGrid" data-grid-id="post" data-url="@Url.Action("PostsList", "Post")" class="list-table">
                        <thead>
                            <tr>
                                <th width="40%" data-url="@Url.Action("Edit", "Post")?id=">@Loc.Code</th>
                                <th width="60%" data-url="@Url.Action("Edit", "Post")?id=">@Loc.Name</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageCss{
    <link href="~/Content/jquery.bootgrid.css" rel="stylesheet" />
}

@section pageScripts{
    <script type="text/javascript" src="~/Scripts/jquery.bootgrid.js"></script>

    <script>
        $dataTable = $('#mainGrid');
        $dataTable.DataTable({
            ajax: {
                url: $dataTable.attr('data-url'),
                data: function (d) {
                    d.Keywords = $("#Keywords").val();
                }
            },
            columns: [
                { data: "Id", name: "AcPost", filtertype: "text", render: $.fn.dataTable.render.link("Id") },
                { data: "Name", name: "AcName", filtertype: "text", render: $.fn.dataTable.render.link("Id") },
            ]
        });

        var typingTimer;
        var doneTypingInterval = 600;
        $('#Keywords').off('keyup');
        $('#Keywords').on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(function () { $.fn.dataTable.reload($dataTable); }, doneTypingInterval);
        });
    </script>
}