{% extends "base.html" %}
{% block title %}{% spaceless %}我要提问{% endspaceless %}{% endblock %}
{% block forejs %}
        <script type='text/javascript' src='/content/js/com.cnprog.editor.js'></script>
        <script type='text/javascript' src='/content/js/com.cnprog.post.pack.js'></script>
        <script type='text/javascript' src='/content/js/jquery.validate.pack.js'></script>
        <script type='text/javascript' src='/content/js/wmd/showdown-min.js'></script>
        <script type='text/javascript' src='/content/js/wmd/wmd-min.js'></script>
        <link rel="stylesheet" type="text/css" href="/content/js/wmd/wmd.css" />
        <script type="text/javascript">
        $().ready(function(){
            //set current module button style
            $("#nav_ask").attr('className',"on");
            $('#editor').TextAreaResizer();

            //highlight code synctax when editor has new text
            $("#editor").typeWatch({highlight: false, wait: 3000,
                             captureLength: 5, callback: lanai.highlightSyntax});

            //toggle preview of editor
            var display = true;
            var txt = "[禁用预览]";
            $('#pre-collapse').text(txt);
            $('#pre-collapse').bind('click', function(){
                txt = display ? "[启用预览]" : "[禁用预览]";
                display = !display;
                $('#previewer').toggle();
                $('#pre-collapse').text(txt);
            });

            //Tags autocomplete action
            var tags = {{ tags|safe }};
        	$("#id_tags").autocomplete(tags, {
                minChars: 1,
        		matchContains: true,
                max: 20,
                multiple: true,
                multipleSeparator: " ",
        		formatItem: function(row, i, max) {
        			return row.n + " ("+ row.c +")";
        		},
                formatResult: function(row, i, max){
                    return row.n;
                }

            });

            setupFormValidation("#fmask", CPValidator.getQuestionFormRules(), CPValidator.getQuestionFormMessages());
            lanai.highlightSyntax();

        });
        </script>
{% endblock %}

{% block content %}
<div id="main-bar" class="headNormal">
    我要提问
</div>
<div id="main-body" class="ask-body">
    <div id="askform">
        <form id="fmask" action="" method="post" >
            <p class="form-item">
                <label for="id_title" ><strong>{{ form.title.label_tag }}:</strong></label> <span class="form-error"></span><br>
                {{ form.title }} {{ form.title.errors }}
                <div class="title-desc">
                    {{ form.title.help_text }}
                </div>
            </p>

            <p class="form-item">
                <div id="wmd-button-bar" class="wmd-panel"></div>
                {{ form.text }}

                <div class="preview-toggle">
                    <table width="100%">
                        <tr>
                            <td>
                                <span id="pre-collapse" title="打开或者关闭Markdown编辑器的实时预览">预览开关</span>
                            </td>
                            <td style="text-align:right;">
                                {{ form.wiki }} <span style="font-weight:normal;cursor:help" title="{{form.wiki.help_text}}">{{ form.wiki.label_tag }} </span>
                            </td>
                        </tr>

                    </table>
                </div>
                <div id="previewer" class="wmd-preview"></div>
                <span class="form-error"></span>
                <br>
            </p>
            <p class="form-item">
                <strong>{{ form.tags.label_tag }}:</strong> <span class="form-error"></span><br>
                {{ form.tags }}  {{ form.tags.errors }}
                <div class="title-desc">
                    {{ form.tags.help_text }}
                </div>
            </p>
            <br>
            {% if not request.user.is_authenticated %}
            <table id="login-box">
                <tr>
                    <td style="vertical-align:middle;">
                    <strong>使用 <a href="http://openid.net/" title="了解更多有关OpenID的信息">OpenID</a> 登录：</strong><br>
                        {{ form.openid }}
                        <div class="title-desc">
                            获取您自己的<a href="https://www.myopenid.com/" target=="_blank">OpenID</a>。
                        </div>
                    </td>
                    <td style="vertical-align:middle; padding: 0px 40px 0px 40px">
                        <div style="position: absolute; margin-top:40px; background-color:white; margin-left:-10px; padding:5px;">或</div>
                        <div style="width:1px; border-left:solid 1px #999; height:8em; margin:auto;"></div>
                    </td>
                    <td style="vertical-align:middle;">
                        <strong>您的大名:</strong><br>
                        {{ form.user }}
                        <p>
                        <strong>电子邮件:（不会公开显示）</strong><br>
                        {{ form.email }}
                        </p>
                    </td>
                </tr>
            </table>
            {% endif %}
            <input type="submit" value="现在提问" class="submit" />
            <br><br>
        </form>
    </div>
</div>
{% endblock %}

{% block sidebar %}
<div class="boxC">
    <p class="subtitle darkred">受欢迎的提问</p>
    <div>
        <ul class="list-item">
            <li>
                <b>您的问题与编程相关吗？</b>
            </li>
            <li>
                建议您提的问题是可以被答复的，而不仅仅是可以讨论。
            </li>
            <li>
                请详细描述您的问题。
            </li>
            <li>
                我们推荐您使用中文描述问题，这样可以得到更多的答复机会。
            </li>
        </ul>
         <a href="/faq/" target="_blank" title="查看常见问题" style="float:right;position:relative">faq »</a>
         <br>
    </div>
</div>

<div class="boxC">
    <p class="subtitle">Markdown快速参考</p>
    <ul class="list-item">
        <li>
            *斜体* 或者 _斜体_

        </li>
        <li>
            **加粗** 或者 __加粗__

        </li>
        <li>
            <b>链接</b>：一个[例子](http://url.com/ "标题")

        </li>

        <li>
            <b>图片</b>：![alt 文本](/path/img.jpg "标题")

        </li>
        <li>
            列表：
            1.  Foo
            2.  Bar
        </li>
        <li>
            基本的HTML标签也是支持的
        </li>
    </ul>
    <a href="http://en.wikipedia.org/wiki/Markdown" target="_blank" style="float:right;position:relative">有关Markdown详细说明 »</a>
    <br>
</div>

{% endblock %}

{% block endjs %}
{% endblock %}