@model PantheonRA.BackOffice.Models.BaseGridFilterModel
@{
    ViewBag.Title = "Currencies";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <a class="navbar-minimalize btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
        <h2>@ViewBag.Title</h2>
        <span class="breadcrumb-divider">&bull;</span>
        <ol class="breadcrumb">
            <li><a href="@Url.Action("Index", "Currencies")">Home</a></li>
            <li>@Loc.MasterData</li>
            <li class="active"><strong>@ViewBag.Title</strong></li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>

<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">

        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>List of all available @ViewBag.Title</h5>
                </div>
                <div class="ibox-content">
                    <div class="row m-b-sm m-t-sm">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-10">
                                    <div class="form-group">
                                        @Html.TextBoxFor(model => model.Keywords, new { @id = "Keywords", @class = "form-control", @placeholder = "Search by name and code..." })
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <button type="button" id="searchMainGrid" class="btn btn-block btn-outline btn-primary">@Loc.Search</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="project-list">
                        <table id="mainGrid" class="list-table">
                            <thead>
                                <tr>
                                    <th data-column-id="Id" data-type="numeric" data-visible="false" data-identifier="true">Id</th>
                                    <th data-column-id="Code">@Loc.Code</th>
                                    <th data-column-id="Name">@Loc.Name</th>
                                    <th data-column-id="LastChangeTime">Changed</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </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>
        var grid  = $("#mainGrid").bootgrid({
            ajax: true,
            url: "@Url.Action("_CurrencyList", "Currencies")",
            templates: {
                search: "",
                header: ""
            },
            post: function () {
                return {
                    Keywords: $("#Keywords").val()
                };
            },
        });

        $("#searchMainGrid").on("click", function () {
            $('#mainGrid').bootgrid('reload');
        });
    </script>
}