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

{% block head %}
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/board_common.css?ver=1.0.0') }}">
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/qa.css?ver=1.0.0') }}">
    <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 %}

    <div id="bo_qa_view" class="bo_common bo_view">

        <h2 id="view_subject">
            <span class="subject_cate">{{ qa.qa_category }}</span>
            {{ qa.qa_subject|safe }}
        </h2>

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

            <div class="header_info">
                <span class="blind">작성자</span>
                <span>{{ qa.qa_name }}</span>

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

            <ul class="view_buttons">
                <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="buttons_more">
                    <button type="button" class="more_opener btn_b01 btn" title="게시판 읽기 옵션">
                        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                        <span class="blind">게시판 읽기 옵션</span>
                    </button>
                    <ul class="more">
                        <li>
                            <a href="{{ url_for('qa_form_edit', qa_id=qa.qa_id) }}" 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) }}" 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>
                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_img">
                {% for image in qa.image %}
                    <a href="/{{ image }}" target="_blank" class="view_image">
                        <img src="/{{ image }}" max-width="{{ qa_config.qa_image_width }}">
                    </a>
                {% endfor %}
            </div>

            {% if qa.qa_email or qa.qa_hp %}
            <ul id="article_contact">
                {% if qa.qa_email %}
                <li>
                    <i class="fa fa-regular fa-envelope" aria-hidden="true"></i>
                    이메일: {{ qa.qa_email }}
                </li>
                {% endif %}
                {% if qa.qa_hp %}
                <li>
                    <i class="fa fa-phone" aria-hidden="true"></i>
                    연락처: {{ qa.qa_hp }}
                </li>
                {% endif %}
            </ul>
            {% endif %}

            <div id="article_contents" class="{{ request.state.editor }}">
                {{ qa.qa_content|safe }}
            </div>
        </div>

        <div id="view_file" class="view_filelink">
            <h2 class="blind">첨부파일</h2>
            <ul>
                {% for file in qa.file %}
                <li>
                    <i class="fa fa-download" aria-hidden="true"></i>
                    <a href="{{ url_for('qa_download_file', qa_id=qa.qa_id, file_index=file.index) }}" class="view_file_download">
                        <strong>{{ file.name }}</strong>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>

        <div id="view_move">
            {% if prev %}
            <a href="{{ url_for('qa_view', qa_id=prev.qa_id) }}?{{ request.query_params }}" class="prev">
                <i class="fa fa-chevron-left" aria-hidden="true"></i>
                <span class="label">이전글</span>
            </a>
            {% else %}
            <div class="prev"></div>
            {% endif %}
            {% if next %}
            <a href="{{ url_for('qa_view', qa_id=next.qa_id) }}?{{ request.query_params }}" class="next">
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                <span class="label">다음글</span>
            </a>
            {% else %}
            <div class="next"></div>
            {% endif %}
        </div>

    </div>

    {% if answer %}
    <div id="bo_qa_answer_view" class="bo_common">

        <div id="answer_view_header">

            <div class="header_subject">
                <span class="label">답변</span>
                <span class="subject">
                    {{ answer.qa_subject }}
                </span>
                <span class="datetime">
                    <i class="fa fa-regular fa-clock" aria-hidden="true"></i>
                    {{ answer.qa_datetime|datetime_format }}
                </span>
            </div>

            {% if request.state.is_super_admin %}
            <div class="buttons_more">
                <button type="button" class="more_opener btn_b01 btn" title="답변 옵션"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="blind">답변 옵션</span></button>
                <ul class="more">
                    <li><a href="{{ url_for('qa_form_edit', qa_id=answer.qa_id) }}">답변수정</a></li>
                    <li><a href="{{ url_for('qa_delete', qa_id=answer.qa_id) }}" onclick="del(this.href); return false;">답변삭제</a></li>
                </ul>
            </div>
            {% endif %}

        </div>

        <div id="answer_view_contents">
            <div id="contents_img">
                {% for image in answer.image %}
                    <a href="/{{ image }}" target="_blank" class="view_image">
                        <img src="/{{ image }}">
                    </a>
                {% endfor %}
            </div>

            {{ answer.qa_content|safe }}

            <div class="view_filelink">
                <h2 class="blind">첨부파일</h2>

                <ul>
                    {% for file in answer.file %}
                    <li>
                        <i class="fa fa-download" aria-hidden="true"></i>
                        <a href="/{{ file.path }}" download="{{ file.name }}">
                            <strong>{{ file.name }}</strong>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div id="qa_continue">
            <a href="{{ url_for('qa_form_write') }}?qa_related={{ qa.qa_id }}">추가질문</a>
        </div>

    </div>

    {% elif request.state.is_super_admin %}
    <div id="bo_qa_answer_write" class="bo_common bo_write">
        <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="write_subject">
                <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="제목">
            </div>

            <div>
                <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 %}
            </div>

            <div class="write_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>
            </div>

            <div class="write_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>
            </div>

            <div class="btn_confirm">
                <button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">답변등록</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>

    </div>

    {% endif %}

    {% if related_list %}
    <div id="bo_qa_relation" class="bo_list">
        <h2>연관질문</h2>

        <table class="list_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 class="table_subject">
                        <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">
                            {{ related.qa_subject }}
                        </a>
                    </td>
                    <td class="table_datetime">{{ related.qa_datetime|datetime_format('%y-%m-%d') }}</td>
                    <td class="table_status">
                        {% if related.qa_status %}
                            <span class="txt_done">답변완료</span>
                        {% else %}
                            <span class="txt_rdy">답변대기</span>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    <script>
    $(function() {
        $("#view_article").viewimageresize();
    });
    </script>

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