{% extends "base.html" %}
{% if board.bo_use_sideview %}
    {% import "/sideview/macros.html" as sideview %}
{% endif %}

{% block head %}
    <script src="/static/js/viewimageresize.js"></script>
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/board_common.css?ver=1.0.0') }}">
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/board_skin_basic.css?ver=1.0.0') }}">
{% endblock head %}

{% block title %}{{ write.wr_subject|truncate(20, False, '...', 0) }} > {{ board.subject }}{% endblock title %}
{% block subtitle %}{{ board.subject }}{% endblock subtitle %}

{% block content %}
{% set board_config=board_config(request, board) %}
{% set login_member=request.state.login_member %}
{% set is_admin=get_admin_type(request, login_member.mb_id, board=board) %}
{% set bo_table_width=board.bo_table_width if board.bo_table_width > 0 else 100 %}
<div id="bo_basic_view" class="bo_common bo_view" style="width:{{ bo_table_width }}{% if bo_table_width <= 100 %}%{% else %}px{% endif %}">

    <h2 id="view_subject">
        {% if board.bo_use_category and write.ca_name %}
        <span class="subject_cate">{{ write.ca_name }}</span>
        {% endif %}
        {{ write.wr_subject|truncate(250, False, '...', 0) }}
    </h2>

    <div id="view_header">
        <h2 class="blind">페이지 정보</h2>

        <div class="header_profile_img">
            <img src="{{ get_member_image(write.mb_id) }}" alt="">
        </div>

        <div class="header_info">

            <div>
                <span class="blind">작성자</span>
                <strong>
                    {% if board.bo_use_sideview %}
                        {{ sideview.get(request, write.mb_id, write.name, write.wr_email, write.wr_homepage)|safe }}
                    {% else %}
                        <span class="{% if write.mb_id %}member{% else %}guest{% endif %}">
                            {{ write.name }}
                        </span>
                    {% endif %}
                    {% if write.ip %}
                        ({{ write.ip }})
                    {% endif %}
                </strong>
            </div>

            <div>
                <i class="blind">댓글</i>
                <span><a href="#bo_basic_comment"> <i class="fa fa-regular fa-commenting" aria-hidden="true"></i> {{ write.wr_comment|number_format }}건</a></span>

                <i class="blind">조회</i>
                <span><i class="fa fa-eye" aria-hidden="true"></i> {{ write.wr_hit|number_format }}회</span>

                <i class="blind">작성일</i>
                <span class="info_date"><i class="fa fa-regular fa-clock" aria-hidden="true"></i> {{ write.wr_datetime|datetime_format }}</span>
            </div>

        </div>

        <ul class="view_buttons">
            <li>
                <a href="{{ url_for('list_post', bo_table=board.bo_table)|set_query_params(request) }}" class="btn_b01 btn" title="목록">
                    <i class="fa fa-list" aria-hidden="true"></i><span class="blind">목록</span>
                </a>
            </li>
            {% if is_reply %}
            <li>
                <a href="{{ url_for('write_form_add', bo_table=board.bo_table)|set_query_params(request, parent_id=write.wr_id) }}" class="btn_b01 btn" title="답변">
                    <i class="fa fa-reply" aria-hidden="true"></i><span class="blind">답변</span>
                </a>
            </li>
            {% endif %}
            {% if is_write %}
            <li>
                <a href="{{ url_for('write_form_add', bo_table=board.bo_table)|set_query_params(request) }}" class="btn_b01 btn" title="글쓰기">
                    <i class="fa fa-pencil" aria-hidden="true"></i><span class="blind">글쓰기</span>
                </a>
            </li>
            {% endif %}
            {% if is_admin or write.mb_id == login_member.mb_id or not write.mb_id %}
            <li class="buttons_more">
                <button type="button" class="more_opener btn_b01 btn">
                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="blind">게시판 리스트 옵션</span>
                </button>
                <ul class="more">
                    <li>
                        <a href="{{ url_for('write_form_edit', bo_table=board.bo_table, wr_id=write.wr_id)|set_query_params(request) }}">
                            수정<i class="fa fa-pen-to-square" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('delete_post', bo_table=board.bo_table, wr_id=write.wr_id)|set_query_params(request) }}" onclick="del(this.href); return false;">
                            삭제<i class="fa fa-regular fa-trash-can" aria-hidden="true"></i>
                        </a>
                    </li>
                    {% if is_admin %}
                    <li>
                        <a href="#" onclick="board_move(this.href, 'copy'); return false;">
                            복사<i class="fa fa-regular fa-file" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="board_move(this.href, 'move'); return false;">
                            이동<i class="fa fa-arrows" aria-hidden="true"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul> 
            </li>
            {% endif %}
        </ul>
        <script>
            jQuery(function($){
                $(".buttons_more .more_opener").on("click", function(e) {
                    e.stopPropagation();
                    $(this).next(".more").toggle();
                })
                $(document).on("click", function (e) {
                    if(!$(e.target).closest(".more_opener").length) {
                        $(".buttons_more .more").hide();
                    }
                });
            });
        </script>

    </div>

    <div id="view_article">
        <h2 class="blind">본문</h2>

        <div id="article_share">
            <!-- SNS START -->
            <!-- SNS END -->
            {% if login_member %}
                <a href="{{ url_for('scrap_form', bo_table=board.bo_table, wr_id=write.wr_id) }}" target="_blank" class="btn btn_b03" onclick="win_scrap(this.href); return false;">
                    <i class="fa fa-bookmark" aria-hidden="true"></i> 스크랩
                </a>
            {% endif %}
        </div>

        <div id="article_img">
        {% for image in images %}
            <a href="/{{ image.bf_file }}" target="_blank" class="view_image">
                <img src="/{{ image.bf_file }}" width="{{ board_config.image_width }}" alt="" title="">
            </a>
        {% endfor %}
        </div>

        <div id="article_contents" class="{{ request.state.editor }}">
            {{ write.wr_content|set_image_width(board_config.image_width)|url_auto_link(request)|safe }}
        </div>

        {{ board_config.get_member_signature(write.mb_id) }}

        {% if board.bo_use_good or board.bo_use_nogood %}
        <div id="article_react">
            {% if board.bo_use_good %}
            <div>
                <a href="/bbs/ajax/good/{{ board.bo_table }}/{{ write.wr_id }}/good" id="react_good" class="btn_react react_good {{ "active" if write.is_good else "" }}">
                    <i class="fa fa-regular fa-thumbs-up" aria-hidden="true"></i>
                    <span class="blind">추천</span>
                    <strong>{{ write.wr_good }}</strong>
                </a>
                <b class="react_msg good"></b>
            </div>
            {% endif %}
            {% if board.bo_use_nogood %}
            <div>
                <a href="/bbs/ajax/good/{{ board.bo_table }}/{{ write.wr_id }}/nogood" id="react_nogood" class="btn_react react_nogood {{ "active" if write.is_nogood else "" }}">
                    <i class="fa fa-regular fa-thumbs-down" aria-hidden="true"></i>
                    <span class="blind">비추천</span>
                    <strong>{{ write.wr_nogood }}</strong>
                </a>
                <b class="react_msg nogood"></b>
            </div>
            {% endif %}
        </div>
        {% endif %}

    </div>

    {% if files %}
    <div id="view_file" class="view_filelink">
        <h2 class="blind">첨부파일</h2>
        <ul>
        {% for file in files %}
            <li>
                <i class="fa fa-download" aria-hidden="true"></i>
                <div>
                    <a href="/board/{{ board.bo_table }}/{{ write.wr_id }}/download/{{ file.bf_no }}" class="view_file_download">
                        <strong>{{ file.bf_source }}</strong>
                        ({{ file.bf_filesize|filesizeformat }})
                    </a>
                    <div class="filelink_cnt">{{ file.bf_download }}회 다운로드 | DATE : {{ file.bf_datetime|datetime_format }}</div>
                </div>
            </li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if links %}
    <div id="view_link" class="view_filelink">
        <h2 class="blind">관련링크</h2>
        <ul>
            {% for link in links %}
            <li>
                <i class="fa fa-link" aria-hidden="true"></i>
                <div>
                    <a href="{{ url_for("link_url", bo_table=board.bo_table, wr_id=write.wr_id, no=link.no) }}" target="_blank">
                        <strong>{{ link.url|truncate(70, False, '...', 0) }}</strong>
                    </a>
                    <div class="filelink_cnt">{{ link.hit|number_format }}회 연결</div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    {% if prev or next %}
    <div id="view_move">
        {% if prev %}
        <a href="{{ url_for('read_post', bo_table=board.bo_table, wr_id=prev.wr_id )|set_query_params(request) }}" class="prev">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
            <span class="label">이전글</span>
            <span class="subject">{{ prev.wr_subject }}</span>
            <span class="date">{{ prev.wr_datetime|datetime_format }}</span>
        </a>
        {% else %}
        <div class="prev"></div>
        {% endif %}
        {% if next %}
        <a href="{{ url_for('read_post', bo_table=board.bo_table, wr_id=next.wr_id )|set_query_params(request) }}" class="next">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
            <span class="label">다음글</span>
            <span class="subject">{{ next.wr_subject }}</span>
            <span class="date">{{ next.wr_datetime|datetime_format }}</span>
        </a>
        {% else %}
        <div class="next"></div>
        {% endif %}
    </div>
    {% endif %}

    <button type="button" class="comment_opener">
        <span class="total"><b>댓글</b> {{ comments|count|number_format }}</span>
        <i class="fa fa-angle-down"></i>
    </button>

    <div id="bo_basic_comment" class="bo_comment">
        <h2 class="blind">댓글목록</h2>

        {% for comment in comments %}
        {% set reply_depth=comment.wr_comment_reply|length %}
        <div id="c_{{ comment.wr_id }}" class="comment {% if reply_depth %}comment_depth{{ reply_depth }}{% endif %}">

            <h3 class="blind">{{ comment.name }}님의 댓글</h3>

            {% if reply_depth %}
                <i class="fa fa-reply"></i>
                <span class="blind">대댓글</span>
            {% endif %}

            <div class="comment_profile_img">
                <img src="{{ get_member_image(comment.mb_id) }}" alt="">
            </div>

            <div class="comment_contents">

                <div class="contents_info">
                    {% if board.bo_use_sideview %}
                        {{ sideview.get(request, comment.mb_id, comment.name, comment.wr_email, comment.wr_homepage)|safe }}
                    {% else %}
                        <span class="{% if comment.mb_id %}member{% else %}guest{% endif %}">
                            {{ comment.name }}
                        </span>
                    {% endif %}
                    {% if comment.ip %}
                        <span class="blind">아이피</span>
                        <span>({{ comment.ip }})</span>
                    {% endif %}

                    <span class="blind">작성일</span>
                    <span class="datetime">
                        <i class="fa fa-regular fa-clock" aria-hidden="true"></i>
                        <time datetime="{{ comment.wr_datetime|datetime_format }}">{{ comment.wr_datetime|datetime_format }}</time>
                    </span>
                </div>

                <div class="contents">
                    {% if comment.is_secret %}
                        <i class="fa fa-lock"></i>
                        <span class="blind">비밀댓글입니다.</span>
                    {% endif %}
                    {% if comment.is_secret_content %}
                        <a href="{{ url_for('password_page', action="comment-view", bo_table=board.bo_table, wr_id=comment.wr_id) }}" class="certify">
                            댓글내용 확인
                        </a>
                    {% else %}
                        {{ comment.wr_content|safe }}
                    {% endif %}

                    <div id="edit_{{ comment.wr_id }}" class="bo_comment_write"></div><!-- 수정 -->
                    <div id="reply_{{ comment.wr_id }}" class="bo_comment_write"></div><!-- 답변 -->
                </div>

            </div>

            <input type="hidden" value="{% if "secret" in comment.wr_option %}secret{% endif %}" id="secret_comment_{{ comment.wr_id }}">
            <textarea id="save_comment_{{ comment.wr_id }}" style="display:none">{{ comment.save_content|safe }}</textarea>

            <div class="buttons_more">
                <button type="button" class="more_opener btn_b01 btn">
                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                    <span class="blind">댓글 옵션</span>
                </button>
                <ul class="more">
                    {% if comment.is_reply %}
                    <li><button type="button" class="more_reply" data-wrid="{{ comment.wr_id }}">답변</button></li>
                    {% endif %}
                    {% if comment.is_edit %}
                    <li><button type="button" class="more_modify" data-wrid="{{ comment.wr_id }}">수정</button></li>
                    {% endif %}
                    {% if comment.is_del %}
                    <li><button type="button" class="more_delete" data-href="/board/delete_comment/{{ board.bo_table }}/{{ comment.wr_id }}">삭제</button></li>
                    {% endif %}
                </ul>
            </div>
        </div>
        {% else %}
        <p class="empty">등록된 댓글이 없습니다.</p>
        {% endfor %}

        <script>
            $(function() {
                $(".more_reply").click(function() {
                    let $this = $(this);
                    let wrId = $this.data("wrid");

                    comment_box(wrId, "c");
                    $(this).closest(".more").hide();
                    return false;
                });

                $(".more_modify").click(function() {
                    let $this = $(this);
                    let wrId = $this.data("wrid");

                    comment_box(wrId, "cu");
                    $(this).closest(".more").hide();
                    return false;
                });

                $(".more_delete").click(function() {
                    let $this = $(this);
                    let href = $this.data("href");

                    comment_delete(href);
                    $this.closest(".more").hide();
                    return false;
                });

                $(document).mouseup(function (e){
                    var container = $(".more");
                    if( container.has(e.target).length === 0)
                    container.hide();
                });
            });
        </script>
    </div>

    {% if is_comment_write %}
    <div id="bo_basic_comment_write" class="bo_comment_write">
        <h2 class="blind">댓글쓰기</h2>

        <form name="fviewcomment" id="fviewcomment" method="post" autocomplete="off"
            action="{{ url_for('write_comment_update', bo_table=board.bo_table)|set_query_params(request) }}" 
            onsubmit="return fviewcomment_submit(this);">

            <input type="hidden" name="w" id="w" value="c">
            <input type="hidden" name="bo_table" value="{{ board.bo_table }}">
            <input type="hidden" name="wr_id" value="{{ write.wr_id }}">
            <input type="hidden" name="comment_id" value="{{ request.query_params.c_id }}" id="comment_id">
            <input type="hidden" name="sca" value="{{ request.query_params.sca }}">
            <input type="hidden" name="sfl" value="{{ request.query_params.sfl }}">
            <input type="hidden" name="stx" value="{{ request.query_params.stx }}">
            <input type="hidden" name="spt" value="{{ request.query_params.spt }}">
            <input type="hidden" name="page" value="{{ request.query_params.page }}">
            <input type="hidden" name="token" value="">

            <div class="write_writer">
                {% if not request.state.login_member %}
                <label for="wr_name" class="blind">이름<strong> 필수</strong></label>
                <input type="text" name="wr_name" value="" id="wr_name" required class="frm_input required" size="25" placeholder="이름">
                <label for="wr_password" class="blind">비밀번호<strong> 필수</strong></label>
                <input type="password" name="wr_password" id="wr_password" required class="frm_input required" size="25"  placeholder="비밀번호">
                {% endif %}
            </div>

            <span class="blind">내용</span>
            <textarea id="wr_content" name="wr_content" maxlength="10000" required class="required"
                {% if board.bo_comment_min and board.bo_comment_max %}
                    onkeyup="check_byte('wr_content', 'length_count');"
                {% endif %}
                placeholder="댓글을 입력해주세요"></textarea>

            {% if board.bo_comment_min and board.bo_comment_max %}
            <script> check_byte("wr_content", "length_count"); </script>
            <strong id="contents_length"><span id="length_count">0</span>글자</strong>
            {% endif %}

            {% if not request.state.login_member %}
            <fieldset id="captcha" class="captcha">{% include captcha_widget(request) ignore missing %}</fieldset>
            {% endif %}

            <div class="btn_confirm">
                <div class="chk_box">
                    <input type="checkbox" name="wr_secret" value="secret" id="wr_secret">
                    <label for="wr_secret">
                        <span></span>비밀댓글
                    </label>
                </div>

                <button type="button" id="btn_cancel" class="btn_cancel btn">취소</button>
                <button type="submit" id="btn_submit" class="btn_submit">댓글등록</button>
            </div>

            <script>
            $(document).on("keyup change", "textarea#wr_content[maxlength]", function() {
                var str = $(this).val()
                var mx = parseInt($(this).attr("maxlength"))
                if (str.length > mx) {
                    $(this).val(str.substr(0, mx));
                    return false;
                }
            });
            </script>

        </form>
    </div>

    <script>
    var save_before = '';
    var save_html = document.getElementById('bo_basic_comment_write').innerHTML;

    // 글자수 제한
    var char_min = parseInt({{ board.bo_comment_min }}); // 최소
    var char_max = parseInt({{ board.bo_comment_max }}); // 최대

    function fviewcomment_submit(f)
    {
        // 양쪽 공백 없애기
        var pattern = /(^\s*)|(\s*$)/g; // \s 공백 문자
        document.getElementById('wr_content').value = document.getElementById('wr_content').value.replace(pattern, "");
        if (char_min > 0 || char_max > 0)
        {
            check_byte('wr_content', 'length_count');
            var cnt = parseInt(document.getElementById('length_count').innerHTML);
            if (char_min > 0 && char_min > cnt) {
                alert("댓글은 "+char_min+"글자 이상 쓰셔야 합니다.");
                return false;
            } else if (char_max > 0 && char_max < cnt) {
                alert("댓글은 "+char_max+"글자 이하로 쓰셔야 합니다.");
                return false;
            }
        }
        else if (!document.getElementById('wr_content').value)
        {
            alert("댓글을 입력하여 주십시오.");
            return false;
        }

        if (typeof(f.wr_name) != 'undefined')
        {
            f.wr_name.value = f.wr_name.value.replace(pattern, "");
            if (f.wr_name.value == '')
            {
                alert('이름이 입력되지 않았습니다.');
                f.wr_name.focus();
                return false;
            }
        }

        if (typeof(f.wr_password) != 'undefined')
        {
            f.wr_password.value = f.wr_password.value.replace(pattern, "");
            if (f.wr_password.value == '')
            {
                alert('비밀번호가 입력되지 않았습니다.');
                f.wr_password.focus();
                return false;
            }
        }

        f.token.value = generate_token();
        if (f.token.value == "") {
            alert("토큰 생성에 실패하였습니다.");
            return false;
        }

        // captcha 사용시
        if (typeof check_captcha === "function") {
            if (!check_captcha(f)) {
                return false;
            }
        }

        document.getElementById("btn_submit").disabled = true;

        return true;
    }

    function comment_box(comment_id, work)
    {
        var el_id,
            form_el = 'fviewcomment',
            respond = document.getElementById(form_el);

        // 댓글 아이디가 넘어오면 답변, 수정
        if (comment_id) {
            if (work == 'c') {
                el_id = 'reply_' + comment_id;
            } else {
                el_id = 'edit_' + comment_id;
            }
            // 수정, 답변 시, 취소 버튼 보이기
            document.getElementById('btn_cancel').style.display = '';
        } else {
            el_id = 'bo_basic_comment_write';
            document.getElementById('btn_cancel').style.display = 'none';
        }

        if (save_before != el_id)
        {
            if (save_before)
            {
                document.getElementById(save_before).style.display = 'none';
            }

            document.getElementById(el_id).style.display = '';
            document.getElementById(el_id).appendChild(respond);
            //입력값 초기화
            document.getElementById('wr_content').value = '';
            
            // 댓글 수정
            if (work == 'cu')
            {
                document.getElementById('wr_content').value = document.getElementById('save_comment_' + comment_id).value;
                if (typeof char_count != 'undefined')
                    check_byte('wr_content', 'char_count');
                if (document.getElementById('secret_comment_'+comment_id).value)
                    document.getElementById('wr_secret').checked = true;
                else
                    document.getElementById('wr_secret').checked = false;
            }

            document.getElementById('comment_id').value = comment_id;
            document.getElementById('w').value = work;

            if(save_before)
                $("#captcha_reload").trigger("click");

            save_before = el_id;
        }
    }

    function comment_delete(href) {
        if (confirm("이 댓글을 삭제하시겠습니까?")) {
            token = generate_token();
            location.href = href + "?token=" + token + "&{{ request.query_params }}";
            return true;
        }
        return false;
    }

    comment_box('', 'c'); // 댓글 입력폼이 보이도록 처리하기위해서 추가 (root님)

    </script>
    {% endif %}

    <script>
    jQuery(function($) {
        //댓글열기
        $(".comment_opener").click(function(e){
            e.preventDefault();
            $(this).toggleClass("cmt_btn_op");
            $(".bo_comment").toggle();
        });

        // 댓글 수정, 답변 취소
        $("#btn_cancel").click(function() {
            comment_box('', 'c');
        });
    });
    </script>
</div>

<script>
    function board_move(href, sw) {
        var f = document.fwrite_copy;
        var sub_win = window.open(href, "move", "left=50, top=50, width=500, height=550, scrollbars=1");

        f.sw.value = sw;
        f.target = "move";
        f.submit();
    }

    $(function() {
        // 이미지 리사이즈
        $("#view_article").viewimageresize();

        // 추천, 비추천
        $(".btn_react").click(function() {
            {% if not login_member: %}
                alert("로그인 후 이용해주세요.");
                return false;
            {% endif %}

            $(".react_msg").stop().fadeOut()

            $(".btn_react").removeClass("active");

            var $tx = $(this).next(".react_msg");

            excute_good(this.href, $(this), $tx);
            return false;
        });
    });

    var isRun = true;
    function excute_good(href, $el, $tx) {
        token = generate_token();

        if (token) {
            $.ajax({
                type: "POST",
                url: href,
                data: {"token": token},
                dataType: "json",
                beforeSend: function() {
                    if (isRun == false) {
                        alert("비정상적인 요청입니다. 잠시만 기다려주세요.")
                        return false;
                    }
                    isRun = false;
                },
                success: function(data) {
                    if (data.status == "success") {
                        $el.addClass("active");
                    }
                    $("#react_good").find("strong").text(number_format(data.good));
                    $("#react_nogood").find("strong").text(number_format(data.nogood));
                    $tx.text(data.message);
                    $tx.fadeIn(200).delay(2500).fadeOut(200);
                },
                error: function(xhr, status, error) {
                    // 메시지 출력
                    var message = xhr.responseJSON ? xhr.responseJSON.message : xhr.responseText;
                    alert(xhr.status + " 오류 - " + message);
                },
                complete: function() {
                    isRun = true;
                }
            });
        } else {
            alert("토큰 생성에 실패하였습니다.");
        }
    }
</script>

<form name="fwrite_copy" id="fwrite_copy" action="{{ url_for('move_post', bo_table=board.bo_table) }}" method="post">
    <input type="hidden" name="sw" value="">
    <input type="hidden" name="chk_wr_id[]" value="{{ write.wr_id }}">
</form>

{% if write_list %}
    {{ write_list|safe }}
{% endif %}
{% endblock content %}