<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostBack = "true" ValidateRequest="false" CodeBehind="SystemTextEditHelp.aspx.cs" Inherits="eDocument.Server.Administrator.Resources.SystemTextEditHelp" MasterPageFile="~/Site.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <style type="text/css">
        .Hide
        {
            display: none;
        }
    </style>

    <a class="skjema-admin__page__back skjema-admin__mb-20" href="SystemTextList.aspx">
        <div class="d-flex align-items-center">
            <div class="skjema-admin__page__back-circle mr-3"></div>
            Systemadministrasjon / Hjelp
        </div>
    </a>

    <h1 class="skjema-admin__page-title mt-0 skjema-admin__mb-20">
        Hjelp
    </h1>

    <p class="skjema-admin__mb-40">
        Tilpass tekstene i hjelp-menyen her.
    </p>
    
    <asp:label id="lblMessage" runat="server" ForeColor="Red"></asp:label>
    
    <div class="skjema-admin__mb-40">
        <asp:RadioButtonList ID="rblCultures"
                             runat="server"
                             CssClass="skjema-admin__table__radio-button-list"
                             AutoPostBack="True"
                             OnSelectedIndexChanged="rblCultures_OnSelectedIndexChanged"
                             RepeatDirection="Horizontal">
        </asp:RadioButtonList>
    </div>
    
    <asp:Label ID="lblCurrentCulture" CssClass="Hide" runat="server"></asp:Label>

    <div class="skjema-admin__mb-40" style="max-width:680px;">
        
        <div class="skjema-admin__mb-20">
            <label class="skjema-admin__editor__label" for="txtTitle">
                Tittel
            </label>
            <asp:TextBox id="txtTitle" class="skjema-admin__editor__input" type="text" placeholder="Hjelp" runat="server"/>
        </div>

        <div class="skjema-admin__mb-20">
            <label class="skjema-admin__editor__label" for="txtIngress">
                Undertittel
            </label>
            <asp:TextBox id="txtIngress" class="skjema-admin__editor__input" type="text" placeholder="Generell veiledning" runat="server"/>
        </div>
        
        <asp:Repeater ID="repeaterHelpSections" runat="server" OnItemDataBound="repeaterHelpSections_OnItemDataBound" OnItemCommand="repeaterHelpSections_ItemCommand">
            <ItemTemplate>
                <asp:Label ID="lblRowId" CssClass="Hide" runat="server"></asp:Label>
                <div data-jscomponent="tabPanel" data-tab-id="1" class="d-flex align-items-start">
                    <asp:Panel ID="pnlEditor" class="skjema-admin__editor__panel" runat="server">
                        <div class="skjema-admin__mb-20">
                            <label class="skjema-admin__editor__label" for="txtSectionTitle">
                                Seksjonstittel
                            </label>
                            <asp:TextBox id="txtSectionTitle" Text='<%# Eval("SectionTitle") %>' class="skjema-admin__editor__input" type="text" runat="server"/>
                        </div>

                        <div>
                            <label class="skjema-admin__editor__label" for="txtSectionBody">
                                Innhold
                            </label>
                            <asp:TextBox id="txtSectionBody" Text='<%# Eval("SectionBody") %>' data-js="tinyMCE" TextMode="MultiLine" Rows="6" runat="server"></asp:TextBox>
                        </div>
                    </asp:Panel>
                    <asp:LinkButton
                        ID="btnDeleteSection"
                        class="skjema-admin__button-trash ml-2"
                        runat="server"
                        Text="Slett"
                        CommandName="Delete">
                    </asp:LinkButton>
                    <%--<button class="skjema-admin__button-trash" type="button">
                        <span class="budicon budicon-trash"></span>
                        Slett
                    </button>--%>
                </div>
                <br>
                <div class="d-none" data-jscomponent="tabPanel" data-tab-id="2">
                </div>
                <div class="d-none" data-jscomponent="tabPanel" data-tab-id="3">
                </div>
                <div class="d-none" data-jscomponent="tabPanel" data-tab-id="4">
                </div>
            </ItemTemplate>
            <FooterTemplate>
                <div class="skjema-admin__plus-anchor-container skjema-admin__mt-30">
                    <span class="skjema-admin__icon__plus skjema-admin__icon__big-and-bold"></span>
                    <asp:LinkButton
                        ID="btnAddSection"
                        class="skjema-admin__plus-anchor"
                        runat="server"
                        Text="Legg til ny seksjon"
                        CommandName="Add">
                    </asp:LinkButton>
                    <%--<a href="#" class="skjema-admin__plus-anchor">
                        Legg til ny seksjon
                    </a>--%>
                </div>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    <div class="d-flex justify-content-end">
        <asp:Button ID="btnSave" OnClick="btnSave_OnClick" Text="Lagre endringer" class="skjema-admin__button skjema-admin__button--primary skjema-admin__button--primary-shadow" runat="server"></asp:Button>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            SkjemaAdmin.tinyMCEObj.init({
                selector: "[data-js='tinyMCE']",
                plugins: ['paste', 'link', 'lists', 'code', 'paste', 'fullscreen'],
                toolbar: 'link | bold italic | numlist bullist | formatselect | paste | code | fullscreen',
                menubar: false,
                statusbar: false
            });
        });
    </script>
</asp:Content>