@model PantheonRA.BackOffice.Models.SidePanelViewModel

<div class="side-panel @Model.Class" style="@(string.IsNullOrEmpty(Model.Width) ? string.Empty : "width:" + Model.Width)" id="@Model.Id">
    <div class="side-panel-handle" onclick="closeSidePanel($(this).closest('.side-panel'))">
        <div class="side-panel-handle-icon"><i class="@(string.IsNullOrEmpty(Model.HandleIcon) ? "fa fa-eye fa-rotate-90" : Model.HandleIcon)"></i></div>
        <div class="side-panel-handle-text">@(string.IsNullOrEmpty(Model.HandleText) ? Loc.Preview : Model.HandleText)</div>
    </div>
    <div class="side-panel-content"></div>
</div>

<script>
    function openSidePanel($sidePanel) {
        $(".side-panel").not($sidePanel).removeClass("open");
        $sidePanel.addClass("open");
    }

    function closeSidePanel($sidePanel) {
        $sidePanel.removeClass("open");
    }

    function setSidePanelContent($sidePanel, content, openAfter) {
        $sidePanel.find(".side-panel-content").html(content);

        if (openAfter) {
            openSidePanel($sidePanel);
        }
    }

    function loadSidePanelContent($sidePanel, url, openAfter) {
        $sidePanel.find(".side-panel-content").html('<div class="side-panel-loader"><i class="fa fa-spinner fa-spin fa-x4"></i></div>');
        $.ajax({
            method: "GET",
            url: url,
            success: function (data) {
                $sidePanel.find(".side-panel-content").html(data);
            }
        });

        if (openAfter) {
            openSidePanel($sidePanel);
        }
    }

    function loadPdfPanelContent($sidePanel, url, openAfter, disableToggle) {
        if (!disableToggle && $sidePanel.hasClass("open") && $sidePanel.find(".side-panel-content embed").attr("src") === url) {
            closeSidePanel($sidePanel);
            $sidePanel.find(".side-panel-content").html("");
            return;
        }

        $sidePanel.find(".side-panel-content").html('<div class="side-panel-loader side-panel-loader-media"><i class="fa fa-spinner fa-spin fa-x4"></i></div><embed src="' + url + '#toolbar=1' + '" width="100%" height="100%" />');

        if (openAfter) {
            openSidePanel($sidePanel);
        }
    }

    function loadPdfPanelContentPAAS($sidePanel, url, openAfter, disableToggle) {
        if (!disableToggle && $sidePanel.hasClass("open") && $sidePanel.find(".side-panel-content embed").attr("src") === url) {
            closeSidePanel($sidePanel);
            $sidePanel.find(".side-panel-content").html("");
            return;
        }

        $sidePanel.find(".side-panel-content").html('<div class="side-panel-loader side-panel-loader-media"><i class="fa fa-spinner fa-spin fa-x4"></i></div><embed width="100%" height="100%" />');

        $.post(url, function (response) {
            if (response && response.Error) {
                $().customModal({
                    destroyOnClose: true,
                    showCloseButton: true,
                    type: "error",
                    text: response.Error,
                    buttons: [
                        {
                            icon: 'fa fa-times',
                            text: '@Loc.Confirm',
                            closeOnAction: true,
                            action: function () {
                                closeSidePanel($sidePanel);
                            },
                            type: 'primary'
                        }
                    ]
                });
            } else {
                var byte = base64ToArrayBuffer(response.File ? response.File : response);
                var blob = new Blob([byte], { type: response.ContentType ? response.ContentType : "application/pdf" });
                $sidePanel.find(".side-panel-content").html('<div class="side-panel-loader side-panel-loader-media"><i class="fa fa-spinner fa-spin fa-x4"></i></div><embed src="' + URL.createObjectURL(blob) + '#toolbar=1' + '" width="100%" height="100%" onLoad="$(this).prev().addClass(\'hidden\')" />');
            }
        });

        if (openAfter) {
            openSidePanel($sidePanel);
        }
    }
</script>