@model PantheonRA.BackOffice.Models.ProductsListViewModel
@{
    ViewBag.Title = Loc.FiscalPrinter;
}

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Partial("~/Views/Company/_CompanySettingsTabNavigation.cshtml")
        <div class="tab-content">
            <div class="row buttons-tabbed">
                <a href="@Url.Action("Create", "FiscalDevice")" class="btn btn-primary btn-primary btn-outline" title="@Loc.New">
                    <i class="fa fa-plus"></i><span class="bold visible-lg-inline m-l-xs">@Loc.New</span>
                </a>
            </div>

            <h3 class="m-t-md">@Loc.FiscalPrinter</h3>
            <div class="project-list">
                <div class="document-list">
                    <table id="grid-data" data-grid-id="fiscal-device" data-url="@Url.Action("FiscalDeviceList", "FiscalDevice")" class="datatable list-table">
                        <thead>
                            <tr>
                                <th width="50px" data-name="AnQid">@Loc.Id</th>
                                <th data-url="@Url.Action("Edit", "FiscalDevice")?id=">@Loc.Device</th>
                                <th data-url="@Url.Action("Edit", "FiscalDevice")?id=">@Loc.DeviceName</th>
                                <th>@Loc.Template</th>
                                <th>@Loc.InputDirectory</th>
                                <th>@Loc.OutputDirectory</th>
                                <th>@Loc.Backup</th>
                                <th>@Loc.BackupDirectory</th>
                                <th>@Loc.ComPort</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageScripts{
    <script>
        $(document).ready(function () {
            $dataTable = $('#grid-data');
            $dataTable.DataTable({
                ajax: {
                    url: $dataTable.attr('data-url'),
                    data: function (d) {
                        d.Keywords = $("#Keywords").val();
                    }
                },
                columns: [
                    { data: "AnQid", name: "AnQid", filtertype: "text" },
                    { data: "AcDeviceId", name: "AcDeviceId", filtertype: "text", render: $.fn.dataTable.render.link("AnQid") },
                    { data: "AcDeviceName", name: "AcDeviceName", filtertype: "text", render: $.fn.dataTable.render.link("AnQid") },
                    { data: "TemplateName", name: "AnTemplateQid", filtertype: "text" },
                    { data: "AcInputDir", name: "AcInputDir", filtertype: "text" },
                    { data: "AcOutputDir", name: "AcOutputDir", filtertype: "text" },
                    { data: "AbBackup", name: "AbBackup", filtertype: "text", render: $.fn.dataTable.render.toggle(true, true), className: "dt-center" },
                    { data: "AcBackupDir", name: "AcBackupDir", filtertype: "text" },
                    { data: "AnComPort", name: "AnComport", filtertype: "text" }
                ]
            });
        });
    </script>
}