<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="UserManualDesigner.aspx.cs" Inherits="eDocument.Server.Administrator.edoc_designer.UserManualDesigner" %>


<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
 
    <style>
        :root {
            --global-bg-color: #f5f2f7 !important;
        }

        .open-all {
            color: #7a1ea0;
            font-weight: 500;
            cursor:pointer;
        }

        .Hide
        {
            display: none;
        }

        .delete_linkbutton {
            margin: auto; 
            margin-right: 0;  
            text-decoration: none;
        }

        .editorpanel {
            margin-inline: 30px;
        }
        
        .editorpanel > div:first-of-type {
            padding: 10px 15px;
            border: thin solid #ccd9ea;
        }

        .editorpanel:has(div.section-active) {
            box-shadow: 0px 0px 10px -4px;
        }

        .rm_padding {
            padding: 0 !important;
        }

        .group-wrapper {
            background-color: #ffffff;
            border-radius: 4px;
        }

        .group-wrapper > div:first-of-type {
            background-color: #680094;
            padding: 10px 15px 10px 20px;
            color: #ffffff;
            border-radius: 4px;
        }

        .group-wrapper > div:first-of-type:has(.skjema-admin__side-menu__toggle-button.active) {
            border-radius: 4px 4px 0 0;
        }

        .group-wrapper > div:last-of-type {
            padding-block: 15px;
        }

        .group-wrapper > div > div > span.skjema-admin__side-menu__toggle-button{
            color: #ffffff;
            background-color: transparent;
        }

        .section-wrapper {
            border-color: #ccd9ea;
            padding-block: 15px;
        }

        .section-wrapper:first-of-type {
            padding-top: 15px;
        }

        .active.skjema-admin__side-menu__toggle-button:before {
            transform: rotate(90deg);
        }

        .section-active {
            padding: 20px;
            border-inline: thin solid #ccd9ea;
            border-bottom: thin solid #ccd9ea;
        }
        @media print {
            body{
              -webkit-print-color-adjust:exact !important;
              print-color-adjust:exact !important;
            }
            .group-wrapper > div:first-of-type {
                background-color: #cccccc;
                color: #000000;
                font-weight: 700;
                padding: 0;
            }
            .editorpanel {
                box-shadow: none !important;
            }
            .editorpanel > div:first-of-type {
                background-color: #eeeeee;
                padding: 0;
            }
            .editorpanel div {
                border: none !important;
            }
        }
    </style>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    
    <div id="divNoLicense" runat="server" style="border: 2px; border-style: solid; border-color: red">
        OBS: organisasjonen har ikke lisens for bruk av designer. 
    </div>
    
    <div class="skjema-admin__designer" id="root" runat="server">
    <div class="container">
        <div class="col-12">
        <div class="d-flex justify-content-end align-items-center skjema-admin__mb-20">
            <div class="skjema-admin__mb-10 p-2 flex-fill rm_padding">
                <h1 id="lblTitle" class="skjema-admin__designer__title skjema-admin__mb-20"><asp:Literal ID="litHeader" runat="server" />
                </h1>
            </div>
        </div>
            </div>
        <div class="col-12 d-print-none">
            <div class="d-flex align-items-center skjema-admin__mb-40">
                <input class="skjema-admin__designer__search-bar skjema-admin__mr-10" onkeyup="search()" type="text" placeholder="S&oslash;k i innhold" data-jsid="formFilter" id="formFilter" />
                <button class="skjema-admin__designer__search-button" onclick="search()" type="button" data-jsid="formFilterSubmit">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
                        <defs>
                            <path id="x8gsavwlya" d="M12.917 11.667h-.659l-.233-.225c.817-.95 1.308-2.184 1.308-3.525 0-2.992-2.425-5.417-5.416-5.417C4.925 2.5 2.5 4.925 2.5 7.917c0 2.991 2.425 5.416 5.417 5.416 1.341 0 2.575-.491 3.525-1.308l.225.233v.659l4.166 4.158 1.242-1.242-4.158-4.166zm-5 0c-2.075 0-3.75-1.675-3.75-3.75s1.675-3.75 3.75-3.75 3.75 1.675 3.75 3.75-1.675 3.75-3.75 3.75z" />
                        </defs>
                        <g fill="none" fill-rule="evenodd">
                            <g>
                                <g transform="translate(-1139.000000, -214.000000) translate(1139.000000, 214.000000)">
                                    <mask id="xmiszt1skb" fill="#fff">
                                        <use xlink:href="#x8gsavwlya" />
                                    </mask>
                                    <g fill="#FFF" mask="url(#xmiszt1skb)">
                                        <path d="M0 0H41.667V41.667H0z" transform="translate(-10.833333, -10.833333)" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
            </div>
        </div>
        <div class="col-12">
            <div class="d-flex justify-content-center align-items-center skjema-admin__mb-20 d-print-none">
                <span class="open-all" onclick="openAll(event); return false">&Aring;pne alle</span>
            </div>

            <asp:Repeater ID="repeaterGroups" runat="server" OnItemDataBound="repeaterGroups_OnItemDataBound" OnItemCommand="repeaterGroups_ItemCommand">
            <HeaderTemplate>
            </HeaderTemplate>
            <ItemTemplate>
                <div class="skjema-admin__mb-20 group-wrapper">
                    <asp:Label ID="lblGroupRowId" CssClass="Hide" runat="server" Text='<%# Eval("GroupId") %>'></asp:Label>

                    <div class="d-flex align-items-center justify-content-center" onclick="hide(event);">
                        <div class="p-2 flex-fill rm_padding">
                            <asp:Label id="lblGroup" CssClass="" runat="server"  Text='<%# Eval("GroupTitle") %>'/>
                        </div>
                        <div class="p-2 float-right">
                            <span class="skjema-admin__side-menu__toggle-button active d-print-none"></span>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center align-items-center skjema-admin__mb-20 d-print-none">
                        <span class="open-all" onclick="openAll(event); return false">&Aring;pne alle</span>
                    </div>
                    <div class="d-print-block">
                    <asp:Repeater ID="repeaterSections" runat="server" OnItemDataBound="repeaterSections_OnItemDataBound" OnItemCommand="repeaterSections_ItemCommand">
                        <HeaderTemplate>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <div class="section-wrapper">
                                <div data-jscomponent="tabPanel" data-tab-id="1" class="align-items-start">
                                    <asp:Panel ID="pnlEditor" class="editorpanel skjema-admin__mt-0 " runat="server">
                                        <div class="d-flex  align-items-center justify-content-center"  onclick="hide(event);">
                                            <div class="p-2 flex-fill rm_padding">
                                                <asp:Label id="txtSectionTitle" Text='<%# Eval("SectionTitle") %>' class=""  runat="server" Font-Bold="True" />
                                            </div>
                                            <div class="p-2 float-right">
                                                <span style="background-color: transparent;" class="skjema-admin__side-menu__toggle-button flex-fill d-print-none"></span>
                                            </div>
                                        </div>
                                        <div class="d-none d-print-block">
                                            <asp:Label id="txtSectionBody" Text='<%# Eval("SectionBody") %>'  TextMode="MultiLine" Rows="6" runat="server"></asp:Label>
                                        </div>
                                    </asp:Panel>
                                </div>
                            </div>
                        </ItemTemplate>
                        <FooterTemplate>
                        </FooterTemplate>
                    </asp:Repeater>
                    </div>
                </div>

            </ItemTemplate>
            <FooterTemplate>
                
            </FooterTemplate>
        </asp:Repeater>
        </div>

    </div>
    </div>

    
    <script>
        function search() {
            const filter = document.getElementById("formFilter").value.toUpperCase();
            let groupWrappers = document.querySelectorAll(".group-wrapper");
            groupWrappers.forEach((group) => {
                if (group.innerText.toUpperCase().indexOf(filter) > -1) {
                    group.style.display = "";
                    let matchInGroupTitle = group.getElementsByTagName('div')[0].innerText.toUpperCase().indexOf(filter) >= 0;
                    let sectionWrappers = group.querySelectorAll(".section-wrapper");
                    sectionWrappers.forEach((section) => {
                        if (section.innerText.toUpperCase().indexOf(filter) > -1 || matchInGroupTitle) {
                            section.style.display = "";
                        } else {
                            section.style.display = "none";
                        }
                    });
                } else {
                    group.style.display = "none";
                }
            });
        }

        function hide(event) {
            var span = event.currentTarget.lastElementChild.firstElementChild;
            var contextMenu = span.parentNode.parentNode.nextElementSibling;

            contextMenu.classList.toggle("d-none");
            contextMenu.classList.toggle("section-active");

            while (contextMenu = contextMenu.nextElementSibling) {
                contextMenu.classList.toggle("d-none");
            }

            var hasClass = span.classList.contains("active");

            if (hasClass) {
                span.classList.remove("active");
                //span.classList.toggle("skjema-admin__side-menu__toggle-button");

            } else {
                //span.classList.remove("skjema-admin__side-menu__toggle-button");
                span.classList.add("active");
            }
        }

        function openAll(event) {
            const span = event.currentTarget;
            let mode = span.textContent == "Åpne alle"

            if (mode)
                span.textContent = "Lukk alle";
            else
                span.textContent = "Åpne alle";


            //var contextMenu = span.parentNode.nextElementSibling.ChildNode;
            //contextMenu.classList.toggle("d-none");
            let groupsWrappers = document.querySelectorAll(".group-wrapper");
            let sectionsWrappers = document.querySelectorAll(".section-wrapper");
            groupsWrappers.forEach((group) => {
                if (mode) {
                    group.querySelector(".skjema-admin__side-menu__toggle-button").classList.add("active");
                    group.lastElementChild.classList.remove("d-none");
                } else {
                    group.querySelector(".skjema-admin__side-menu__toggle-button").classList.remove("active");
                    group.lastElementChild.classList.add("d-none");
                }
                sectionsWrappers.forEach((section) => {
                    if (mode) {
                        section.querySelector(".skjema-admin__side-menu__toggle-button").classList.add("active");
                        section.querySelector(".editorpanel").lastElementChild.classList.remove("d-none");
                        section.querySelector(".editorpanel").lastElementChild.classList.add("section-active");
                    } else {
                        section.querySelector(".skjema-admin__side-menu__toggle-button").classList.remove("active");
                        section.querySelector(".editorpanel").lastElementChild.classList.add("d-none");
                        section.querySelector(".editorpanel").lastElementChild.classList.remove("section-active");
                    }
                });
            });

        }

        // Change active in starttab
        Array.from(document.querySelectorAll(".skjema-admin__start-bar__anchor")).forEach(function (link) {
            link.classList.remove("skjema-admin__start-bar__anchor--active");
            if (link.innerHTML.indexOf("Designer") !== -1) {
                link.classList.add("skjema-admin__start-bar__anchor--active");
            }
        });


    </script>
</asp:Content>
