<%@ Page Language="C#" AutoEventWireup="true" CodeFile="View.aspx.cs" Inherits="Board_View" ValidateRequest="false" meta:resourcekey="Page" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../libs/fontawesome/css/all.min.css" >
    <script type="text/javascript" src="../libs/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="../libs/bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        .cboxList {
            margin: 0px;
            list-style: none;
            padding-left: 0px;
        }
        .cboxList > li {
            border-bottom: 1px solid var(--seperator-color);
            padding: 5px 5px 5px 5px;
        }
        .cboxList > li:last-child {
            border-bottom: 0px;
        }
        .cboxListItem {
            margin: 0px;
            list-style: none;            
        }
        .cboxListReply {
            list-style: none;
            margin-left: 15px;
        }
        .cBoxSubject {
            display: flex;
            font-size: 1.25rem;
        }
        .cBoxSubject .last {
            font-size: 1rem;
            margin-left: auto;
            padding-left: 4px;
        }
        .cboxAuthor {
            font-weight: bold;
        }
        .cboxSubject {
            font-weight: normal;
        }
        .cboxDeleted {
            color: #777777;
        }
        .cboxReplyTarget {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        var darkView = { enabled: false };

        $(document).ready(function () {
            Dialog.setMessage('<asp:Literal runat="server" Text="<%$ Resources:Dialog, Title%>" />', '<asp:Literal runat="server" Text="<%$ Resources:Dialog, OK%>" />', '<asp:Literal runat="server" Text="<%$ Resources:Dialog, Cancel%>" />');
            Dialog.setUseBrowserConfirm(<%=AppSetting.UseBrowserConfirm%>);

            // 다크 모드 여부 확인
            if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
                var v = localStorage.getItem("board_darkview");
                if (v !== null) {
                    darkView = JSON.parse(v);
                } else {
                    darkView = { enabled: true };
                }
                SetDarkView(darkView.enabled);
            } else {
                document.getElementById("toggleDarkView").style.display = "none";
            }

            $("#RecmdDiv").click(function () {
                RecommendArticle();
            });
        });

        function ReplyArticle() {
            location.href = "NewTM.aspx?action=reply&<%=_newPageParams%>";
        }

        function EditArticle() {
            location.href = "NewTM.aspx?action=modify&<%=_newPageParams%>";
        }

        function RecommendArticle() {
            // 게시글을 추천하시겠습니까?
            Dialog.confirm({
                content: '<asp:Literal runat="server" Text="<%$ Resources:, Msg04%>" />',
                ok: function () {
                    __doPostBack("RecommendButton", "");
                }
            });
        }

        function ConfirmAddComment() {
            if ($("#CommentTextBox").val().length == 0) {
                return false;
            }
            return true;
        }

        function ConfirmReplyComment() {
            if ($("#ReplyCommentTextBox").val().length == 0) {
                return false;
            }
            return true;
        }

        function ConfirmDelete() {
            // 게시글을 삭제하시겠습니까?
            Dialog.confirm({
                content: '<asp:Literal runat="server" Text="<%$ Resources:, Msg01%>" />',
                ok: function () {
                    __doPostBack("DeleteButton", "");
                }
            });
        }

        function RemoveCommentLinkClick(commentId) {
            // 댓글을 삭제하시겠습니까?
            Dialog.confirm({
                content: '<asp:Literal runat="server" Text="<%$ Resources:, Msg02%>" />',
                ok: function () {
                    $("#<%=CommentId.ClientID %>").val(commentId);
                    __doPostBack("RemoveCommentButton", "");
                }
            });
        }

        function GotoList() {
            location.href = "<%=_listPageParams%>";
        }

        var rcinf = null;
        function ReplyCommentLinkClick(self, commentId) {
            if (rcinf == null) rcinf = $("#ReplyCommentInputForm");
            $(self).parent().parent().append(rcinf);
            rcinf.css("display", "");
            $("#<%=ReplyCommentTextBox.ClientID %>").val("");
            $("#<%=CommentId.ClientID %>").val(commentId);
        }

        function RcButtonClick() {            
            __doPostBack("ReplyCommentButton", "");
        }

        function CancelReplyCommentButtonClick() {
            $("#RcifContainer").append(rcinf);
            rcinf.css("display", "none");
        }

        function ShowMessage(msg) {
            Dialog.alert(msg);
        }

        function ToggleDarkView() {
            darkView.enabled = !darkView.enabled;
            SetDarkView(darkView.enabled);
            localStorage.setItem("board_darkview", JSON.stringify(darkView));
            return false;
        }

        function SetDarkView(toggle) {
            if (toggle) {
                $("#bodyDiv").css({
                    "background-color": "rgba(0, 0, 0, 0)",
                    "color": $("body").css("color")
                });
            } else {
                $("#bodyDiv").css({
                    "background-color": "#fff",
                    "color": "#333"
                });
            }
        }
    </script>

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <CompositeScript>
                <Scripts>
                    <asp:ScriptReference Path="~/libs/tabs/common.js" />
                    <asp:ScriptReference Path="~/libs/tabs/dialog.js" />
                </Scripts>
            </CompositeScript>
        </asp:ScriptManager>

        <div class="container-fluid">
            <div class="row" id="toolBar" data-spy="affix">
                <div class="col-xs-12" style="padding-top:2px;padding-bottom:2px;">
                    <button type="button" id="replyToolButton" runat="server" disabled="disabled" class="btn btn-primary" onclick="ReplyArticle()"><asp:Localize ID="Localize1" runat="server" meta:resourcekey="L01">답글</asp:Localize></button>
                    <button type="button" id="editToolButton" runat="server" disabled="disabled" class="btn btn-primary" onclick="EditArticle()"><asp:Localize ID="Localize2" runat="server" meta:resourcekey="L02">수정</asp:Localize></button>
                    <button type="button" id="deleteToolButton" runat="server" disabled="disabled" class="btn btn-primary" onclick="ConfirmDelete()"><span class="fa-solid fa-trash-can"></span></button>
                    <span>&nbsp;</span>
                    <button type="button" id="closeToolButton" class="btn btn-primary" onclick="GotoList();"><span class="fa-solid fa-bars"></span></button>
                </div>
            </div>
        </div>

        <div class="container-fluid" style="padding-top:40px">
            <div class="row">
                <div class="col-xs-12 cBoxSubject">
                    <span><asp:Literal ID="SubjectLabel" runat="server" Mode="Encode" /></span>
                    <span id="toggleDarkView" class="last"><a href="#" onclick="return ToggleDarkView()"><i class="fa-solid fa-circle-half-stroke"></i></a></span>
                </div>                
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <asp:Literal ID="AuthorName" runat="server" Mode="Encode" /> (<asp:Literal ID="AuthorID" runat="server" Mode="Encode" />)
                </div>
                <div class="col-xs-6 text-right">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <div id="RecmdDiv" style="cursor:pointer;">
                                <small>
                                <asp:Label ID="ReadCountLabel" runat="server"></asp:Label>
                                <span class="fa-regular fa-heart" style="color:#EE4D68"></span>
                                <asp:Label ID="RecommendCountLabel" runat="server"></asp:Label>
                                </small>
                            </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="RecommendButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
            </div>
            <div>
                <span class="text-muted"><small><asp:Literal ID="WriteDate" runat="server" Mode="Encode" /></small></span>
            </div>
            <div id="attachPanel" runat="server" class="collapse">
                <hr />
                <div class="mc-likeLink" data-toggle="collapse" data-target="#attachList">
                    <div class="row" style="padding-bottom:0.5em">
                        <div class="col-xs-12">
                            <i class="fa-solid fa-paperclip"></i> <asp:Label ID="AttachSummaryLabel" runat="server"></asp:Label>
                        </div>
                    </div>
                </div>
                <div id="attachList" class="list-group collapse">
                    <asp:Literal ID="AttachListTag" runat="server" />
                </div>
            </div>
            <hr />
            <div id="bodyDiv" style="min-height: 150px;padding: 5px 10px;overflow:auto">
                <asp:PlaceHolder ID="MsgBodyHolder" runat="server" EnableViewState="false"></asp:PlaceHolder>
            </div>
            <div>&nbsp;</div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                <ContentTemplate>
                    <div class="panel panel-default" id="commentPanel" runat="server">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-6">
                                    <asp:Localize ID="Localize3" runat="server" meta:resourcekey="L03">댓글</asp:Localize> 
                                    <asp:Label ID="CommentCountLabel" runat="server" Text="" CssClass="small text-muted"></asp:Label>
                                </div>                                
                                <div class="col-xs-6 text-right">
                                    <asp:LinkButton ID="RefreshButton" runat="server" OnClick="RefreshButton_Click" Text=""><span class='fa-solid fa-rotate-right'></span></asp:LinkButton>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">                            
                            <asp:Repeater ID="CommentRepeater" runat="server" OnItemDataBound="CommentRepeater_ItemDataBound">
                                <HeaderTemplate>
                                    <ul class="cboxList">
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <li class='<%# ((bool)Eval("TopLevel")) ? "cboxListItem" : "cboxListReply" %>'>
                                        <div>
                                            <asp:PlaceHolder ID="CmtItemHolder" runat="server" />
                                        </div>
                                    </li>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </ul>
                                </FooterTemplate>
                            </asp:Repeater>
                            <div class="row">
                                <div class="col-xs-9">
                                    <textarea class="form-control" rows="2" id="CommentTextBox" runat="server" maxlength="255" meta:resourcekey="CommentTextBox"></textarea>
                                </div>
                                <div class="col-xs-3 text-right">
                                    <asp:Button ID="AddCommentButton" runat="server" Text="등록" CssClass="btn btn-primary" Enabled="false" 
                                        OnClick="AddCommentButton_Click" OnClientClick="return ConfirmAddComment();" meta:resourcekey="AddCommentButton" />
                                </div>
                            </div>
                            <div id="RcifContainer">
                                <div id="ReplyCommentInputForm" style="display:none">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <textarea class="form-control" rows="2" id="ReplyCommentTextBox" runat="server" maxlength="255"></textarea>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-top:4px;">
                                        <div class="col-xs-12 text-right">
                                            <asp:Button ID="AddReplyCommentButton" runat="server" Text="등록" CssClass="btn btn-primary" Enabled="false"
                                                OnClick="AddReplyCommentButton_Click" OnClientClick="return ConfirmReplyComment();" meta:resourcekey="AddReplyCommentButton" />
                                            <asp:Button ID="CancelReplyCommentButton" runat="server" Text="취소" CssClass="btn btn-primary"
                                                OnClientClick="CancelReplyCommentButtonClick();return false;" meta:resourcekey="CancelReplyCommentButton" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="RemoveCommentButton" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </div>

        <div style="display:none">
            <asp:LinkButton ID="DeleteButton" runat="server" OnClick="DeleteButton_Click" Text="" /> 
            <asp:LinkButton ID="RecommendButton" runat="server" OnClick="RecommendButton_Click" Text="" /> 
            <asp:LinkButton ID="RemoveCommentButton" runat="server" OnClick="RemoveCommentButton_Click" />
            <asp:HiddenField ID="CommentId" runat="server" />
        </div>
    </form>
</body>
</html>
