{% extends "base.html" %}
{% import editor_macro(request) as editor %}

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

{% block title %}{{ qa_config.qa_title }}{% endblock title %}

{% block subtitle %}{{ qa_config.qa_title }}{% endblock subtitle %}

{% block content %}
    {% if qa_config.qa_content_head %}
        {{ qa_config.qa_content_head|safe }}
    {% endif %}

    <!-- 게시물 읽기 시작 { -->
    <article id="bo_v" class="mb-4 fs-5">
        <header>
            <h2 id="bo_v_title" class="m-0 px-0 fs-3 py-4"><span class="bo_v_cate d-inline-block main-font rounded-2 fs-3 px-3" style="line-height: 20px;">{{ qa.qa_category }}</span> {{ qa.qa_subject }}</h2>
        </header>
        <section id="bo_v_info fs-5" class="main-bb sub-font cont-bg main-border py-5 px-3">
            <h2 class="blind">페이지 정보</h2>
            <span class="blind">작성자</span>
            <strong class="d-inline-block me-3 fw-normal"> {{ qa.qa_name }}</strong>
            <span class="blind">작성일</span>
            <strong class="bo_date d-inline-block me-3 fw-normal"><i class="fa fa-regular fa-clock" aria-hidden="true"></i> {{ qa.qa_datetime }}</strong>
            {% if qa.qa_email %}
                <span class="blind">이메일</span>
                <strong class="d-inline-block me-3 fw-normal"><i class="fa fa-regular fa-envelope" aria-hidden="true"></i> {{ qa.qa_email }}</strong>
            {% endif %}
            {% if qa.qa_hp %}
                <span class="blind">휴대폰</span>
                <strong class="d-inline-block me-3 fw-normal"><i class="fa fa-phone" aria-hidden="true"></i> {{ qa.qa_hp }}</strong>
            {% endif %}
            <!-- 게시물 상단 버튼 시작 { -->
            <div id="bo_v_top">
                <ul class="d-inline-flex p-0 list-unstyled break-word">
                    <li>
                        <a href="{{ url_for('qa_list') }}?{{ request.query_params }}" class="btn_b01 btn" title="목록">
                            <i class="fa fa-list" aria-hidden="true"></i>
                            <span class="blind">목록</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('qa_form_write') }}?{{ request.query_params }}" class="btn_b01 btn" title="글쓰기">
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                            <span class="blind">글쓰기</span>
                        </a>
                    </li>
                    {% if request.state.is_super_admin or qa.mb_id == request.state.login_member.mb_id %}
                    <li class="position-relative">
                        <a type="button" class="btn_more_opt btn_b01 btn" title="게시판 읽기 옵션">
                            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                            <span class="blind">게시판 읽기 옵션</span>
                        </a>
                        <ul class="more_opt position-absolute end-0">
                            <li>
                                <a href="{{ url_for('qa_form_edit', qa_id=qa.qa_id) }}" class="btn_b01 btn" title="수정">
                                    수정
                                    <i class="fa fa-pen-to-square" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="{{ url_for('qa_delete', qa_id=qa.qa_id) }}" class="btn_b01 btn" onclick="del(this.href); return false;" title="삭제">
                                    삭제
                                    <i class="fa fa-regular fa-trash-can" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                    {% endif %}
                </ul>
                <script>
                    // 게시판 리스트 옵션
                    $(".more_opt").hide();
                    $(".btn_more_opt").on("click", function() {
                        $(".more_opt").toggle();
                    })
                </script>
            </div>
            <!-- } 게시물 상단 버튼 끝 -->
        </section>

        <section id="bo_v_atc">
            <h2 class="blind">본문</h2>
            <div id="bo_v_img" class="w-100 overflow-hidden">
                {% for image in qa.image %}
                    <a href="javascrip:;" target="_blank" class="view_image">
                        <img src="/{{ image }}" max-width="{{ qa_config.qa_image_width }}">
                    </a>
                {% endfor %}
            </div>
            <!-- 본문 내용 시작 { -->
            <div id="bo_v_con" class="{{ request.state.editor }} main-font m-0">{{ qa.qa_content|safe }}</div>
            <!-- } 본문 내용 끝 -->
            
            <!-- 첨부파일 시작 { -->
            <section id="bo_v_file">
                <h2 class="blind">첨부파일</h2>
                <ul class="m-0 list-unstyled">
                {% for file in qa.file %}
                    <li class="position-relative d-flex align-items-center file-border rounded-3 transition-effect p-4 mt-3" style="color: #b2b2b2;">
                        <i class="fa fa-folder-open fs-1 me-4" aria-hidden="true"></i>
                        <a href="/{{ file.path }}" download="{{ file.name }}" class="d-block text-decoration-none break-word main-font fs-5">
                            <strong>{{ file.name }}</strong>
                        </a>
                    </li>
                {% endfor %}
                </ul>
            </section>
            <!-- } 첨부파일 끝 -->
        </section>
        <ul id="bo_v_nb" class="position-relative row mt-3 mb-5 p-0">
              {% if prev %}
                <li class="me-auto col-md-6 mb-3 mb-md-0">
                  <a href="{{ url_for('qa_view', qa_id=prev.qa_id) }}?{{ request.query_params }}" class="btn_prv rounded-3 text-decoration-none sub-font">
                    <i class="fa fa-chevron-up" aria-hidden="true"></i>
                    <span class="fs-4 fw-bold">이전글</span>
                  </a>
                </li>
              {% endif %}
              {% if next %}
                <li class="ms-auto col-md-6">
                  <a href="{{ url_for('qa_view', qa_id=next.qa_id) }}?{{ request.query_params }}" class="btn_next rounded-3 text-decoration-none text-light">
                    <span class="fs-4 fw-bold">다음글</span>
                    <i class="fa fa-chevron-down" aria-hidden="true"></i>     
                  </a>
                </li>
              {% endif %}
        </ul>

        {% if answer %}
            <section id="bo_v_ans">
                <h2><span class="bo_v_reply">답변</span> {{ answer.qa_subject }}</h2>
                <header>
                    <div id="ans_datetime">
                        <i class="fa fa-regular fa-clock" aria-hidden="true"></i> {{ answer.qa_datetime }}
                    </div>
                    {% if request.state.is_super_admin %}
                    <div id="ans_add">
                        <button type="button" class="btn_more_add btn_more_opt btn_b01 btn" title="답변 옵션"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="blind">답변 옵션</span></button>
                        <ul class="more_add">
                            <li><a href="{{ url_for('qa_form_edit', qa_id=answer.qa_id) }}" class="btn_b01 btn" title="답변수정">답변수정</a></li>
                            <li><a href="{{ url_for('qa_delete', qa_id=answer.qa_id) }}" class="btn_b01 btn" onclick="del(this.href); return false;" title="답변삭제">답변삭제</a></li>
                        </ul>
                    </div>
                    <script>
                        // 답변하기 옵션
                        $(".btn_more_add").on("click", function() {
                            $(".more_add").toggle();
                        })
                    </script>
                    {% endif %}
                </header>

                <div id="ans_con">
                    <div id="bo_v_img" class="w-100 overflow-hidden">
                        {% for image in answer.image %}
                            <a href="javascrip:;" target="_blank" class="view_image">
                                <img src="/{{ image }}">
                            </a>
                        {% endfor %}
                    </div>
                    {{ answer.qa_content|safe }}
                    <!-- 첨부파일 시작 { -->
                    <section id="bo_v_file">
                        <h2 class="blind">첨부파일</h2>
                        <ul class="m-0 list-unstyled">
                        {% for file in answer.file %}
                            <li class="position-relative d-flex align-items-center file-border rounded-3 transition-effect p-4 mt-3" style="color: #b2b2b2;">
                                <i class="fa fa-download fs-1 me-4" aria-hidden="true"></i>
                                <a href="/{{ file.path }}" download="{{ file.name }}" class="d-block text-decoration-none break-word main-font fs-5">
                                    <strong>{{ file.name }}</strong>
                                </a>
                            </li>
                        {% endfor %}
                        </ul>
                    </section>
                    <!-- } 첨부파일 끝 -->
                </div>

            </section>
            <div class="bo_v_btn">
                <a href="{{ url_for('qa_form_write') }}?qa_related={{ qa.qa_id }}" class="add_qa" title="추가질문">추가질문</a>  
            </div>
        {% elif request.state.is_super_admin %}
            <section id="bo_v_ans_form">
                <h2>답변등록</h2>
        
                <form name="fanswer" method="post" action="{{ url_for('qa_write_update') }}?{{ request.query_params }}" onsubmit="return fwrite_submit(this);" enctype="multipart/form-data" autocomplete="off">
                    <input type="hidden" name="token" value="">
                    <input type="hidden" name="qa_parent" value="{{ qa.qa_id }}">
                    <input type="hidden" name="qa_category" value="{{ qa.qa_category }}">
                    <input type="hidden" name="qa_html" value="1">

                    <div class="form_01">
                        <ul>
                            <li>
                                <label for="qa_subject" class="blind">제목</label>
                                <input type="text" name="qa_subject" value="" id="qa_subject" required="" class="frm_input required full_input" size="50" maxlength="255" placeholder="제목">
                            </li>
                            <li class="qa_content_wrap smarteditor2">
                                <label for="qa_content" class="blind">내용<strong>필수</strong></label>
                                {% if qa_config.qa_use_editor %}
                                    {{ editor.body("qa_content", "") }}
                                {% else %}
                                    <textarea id="qa_content" name="qa_content" style="width: 100%; height: 300px;"></textarea>
                                {% endif %}
                            </li>
                            <li class="bo_w_flie">
                                <div class="file_wr">
                                    <label for="qa_file_1" class="lb_icon"><i class="fa fa-download" aria-hidden="true"></i><span class="blind"> 파일 #1</span></label>
                                    <input type="file" name="file1" id="qa_file_1" title="파일첨부 1 :  용량 {{ qa_config.qa_upload_size }} 바이트 이하만 업로드 가능" class="frm_file">
                                </div>
                            </li>
                            <li class="bo_w_flie">
                                <div class="file_wr">
                                    <label for="qa_file_2" class="lb_icon"><i class="fa fa-download" aria-hidden="true"></i><span class="blind"> 파일 #2</span></label>
                                    <input type="file" name="file2" id="qa_file_2" title="파일첨부 2 :  용량 {{ qa_config.qa_upload_size }} 바이트 이하만 업로드 가능" class="frm_file">
                                </div>
                            </li>
                        </ul>
                    </div>
        
                    <div class="btn_confirm text-end">
                        <button type="submit" id="btn_submit" accesskey="s" class="btn_submit">답변등록</button>
                    </div>
                </form>
        
                <script>
                    function html_auto_br(obj)
                    {
                        if (obj.checked) {
                            result = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
                            if (result)
                                obj.value = "2";
                            else
                                obj.value = "1";
                        }
                        else
                            obj.value = "";
                    }
            
                    function fwrite_submit(f)
                    {
                        f.token.value = generate_token();

                        return true;
                    }
                </script>
            </section>
        {% endif %}
        
        {% if related_list %}
            <section id="bo_v_rel">
                <h2>연관질문</h2>
                <div class="tbl_head01 tbl_wrap">
                    <table>
                        <thead>
                        <tr>
                            <th scope="col">제목</th>
                            <th scope="col">등록일</th>
                            <th scope="col">상태</th>
                        </tr>
                        </thead>
                        <tbody>
                            {% for related in related_list %}
                                <tr>
                                    <td>
                                        <span class="bo_cate_link">{{ related.qa_category }}</span>
                                        <a href="{{ url_for('qa_view', qa_id=related.qa_id) }}?{{ request.query_params }}" class="bo_tit d-block main-font fw-bold">
                                            {{ related.qa_subject }}
                                        </a>
                                    </td>
                                    <td class="td_date">{{ related.qa_datetime }}</td>
                                    <td class="td_stat">
                                        {% if related.qa_status %}
                                            <span class="txt_done">답변완료</span>
                                        {% else %}
                                            <span class="txt_rdy">답변대기</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        {% endif %}
    </article>
    <!-- } 게시판 읽기 끝 -->
    <script>
    $(function() {
        $("a.view_image").click(function() {
            window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
            return false;
        });

        // 이미지 리사이즈
        $("#bo_v_atc").viewimageresize();
    });
    </script>

    {% if qa_config.qa_content_tail %}
        {{ qa_config.qa_content_tail|safe }}
    {% endif %}
{% endblock content %}