@model PantheonRA.BackOffice.Models.DeviceSettingsViewModel

@{
    ViewBag.Title = Loc.Settings;
    Html.RenderPartial("_Breadcrumb", new PantheonRA.BackOffice.Models.BreadcrumbViewModel
    {
        Links = new List<Tuple<string, string>> {
            new Tuple<string, string>(Loc.AdministrationPanel, Url.Action("Index", "Company")),
            new Tuple<string, string>(Loc.DeviceDetails, string.Empty),
        }
    });
}
<input id="modelId" type="hidden" name="modelId" value="@Model.DeviceId" />
<div class="wrapper wrapper-content  animated fadeInRight device-details-wrapper">
    <div class="row">
        <div class="col-sm-12">
            @Html.Tabs(new List<TabViewModel>() {
                new TabViewModel() {
                    Id = "DetailsTab",
                    Name = Loc.DeviceDetails,
                    ActionUrl = Url.Action("_DeviceDetails", "Devices"),
                    ActionParameters = new { @deviceId = Model.DeviceId }
                },
                // TODO: Device sync
                //new TabViewModel() {
                //    Id = "SynchronizationSettingsTab",
                //    Name = Loc.DeviceSynchronizationSettings,
                //    ActionUrl = Url.Action("_DeviceSynchronizationSettings", "Devices"),
                //    ActionParameters = new { @deviceId = Model.DeviceId }
                //},
                new TabViewModel() {
                    Id = "DeviceSettingTab",
                    Name = Loc.DeviceSettings,
                    ActionUrl = Url.Action("_DeviceSettings", "Devices"),
                    ActionParameters = new { @deviceId = Model.DeviceId, @isWeb = Model.IsWeb }
                }

            })
            <div class="row buttons-ribbon floating-buttons">
                <div class="col-xs-12">
                    <a href="@Url.Action("Index", "Company")#Devices" class="btn btn-success pull-right allow-redirect">@Loc.Back</a>
                </div>
            </div>
        </div>
    </div>
</div>
@section pageCss{
    <link href="~/Content/plugins/sweetAlert/sweetalert.css" rel="stylesheet" />
    <link href="~/Content/plugins/switchery/switchery.css" rel="stylesheet" />
    <link href="~/Content/jquery.bootgrid.css" rel="stylesheet" />
    <link href="~/Content/plugins/sweetAlert/sweetalert2.min.css" rel="stylesheet" />
}

@section pageScripts{
    <script src="~/Scripts/plugins/sweetAlert/sweetalert-dev.js"></script>
    <script src="~/Scripts/plugins/switchery/switchery.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.bootgrid.js"></script>
    <script type="text/javascript">
        $(function () {
            var loadedTabs = [];
            LoadTab($(".tab-link")[0]);
            $(".tab-link").on("click", function () {
                var clickedLink = this;
                LoadTab(clickedLink);
            });

            function LoadTab(clickedLink)
            {
                console.log(clickedLink, clickedLink.getAttribute("href"), loadedTabs);
                if (loadedTabs[clickedLink.getAttribute("href")] !== undefined) {
                    return;
                }

                loadedTabs[clickedLink.getAttribute("href")] = true;
                $.ajax({
                    method: "POST",
                    url: clickedLink.getAttribute("data-action-url"),
                    data: JSON.parse(clickedLink.getAttribute("data-action-parameters")),
                    success: function (partialViewHtml) {
                        $(clickedLink.getAttribute("href") + " div.panel-body").html(partialViewHtml);
                    },
                    error: function () {
                        $(clickedLink.getAttribute("href") + " div.panel-body").html("@Loc.ErrorHappenedPleaseContactOurSupport");
                    }
                });
            }
        })
    </script>
}