{% extends "base.html" %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ static_url("css/wmd.css") }}"/>
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="{{ static_url("js/wmd.js") }}"></script>
<script type="text/javascript" src="{{ static_url("js/showdown.js") }}"></script>
<script type="text/javascript">
  function toggleAskComments(){
    var ask_comments = $("#ask_{{ask.id}}_comments");
    ask_comments.toggle();
    return false;
  }

  function toggleAnswerComments(id){
    var answer_comments = $("#answer_"+id+"_comments");
    answer_comments.toggle();
    return false;
  }

  function submitComment(el){
    frm = $(el);
    action_url = frm.attr("action");
    input_body = $(".body",frm);
    body = input_body.val();
    if(body.length < 1){
      input_body.focus();
      return false;
    }

    $.ajax({
      type : "post",
      url : action_url,
      data : frm.serialize(),
      dataType : "json",
      success : function(item){ 
        if(item.success == 1){
          html = '<div style="display:none;" class="comment"><div class="md_body">'+body+'</div>';
          html += '<div class="info"><a href="/user/'+item.user_id+'">'+item.name+'</a></div>';
          var new_comment = $(html);
          frm.parent().before(new_comment);
          new_comment.fadeIn(200);
          $(".body",frm).val("").focus();
        }
        else{
          alert("异常，评论失败。");
        }
      }
    });
    return false;
  }

  function vote(id,type){
    var answer = $("#answer_"+id);
    vtype = "down";
    if(type == 1) { vtype = "up"; }
    $(".vote_buttons a",answer).removeClass("voted");
    $(".vote_buttons a.vote_"+vtype,answer).addClass("voted");
    $(".action a",answer).removeClass("voted");
    $(".action a.vote_"+vtype,answer).addClass("voted");
    $.get("/answer/"+id+"/vote",{ up : type },function(s){
    });
    return false;
  }

  function flag(el){
    a_flag = $(".ask a.flag");
    if(a_flag.text() == "收藏"){
      f = 1;
      a_flag.addClass("flagged").text("已收藏");
    }
    else{
      f = 0;
      a_flag.removeClass("flagged").text("收藏");
    }
    $.get("/ask/{{ ask.id }}/flag",{flag:f},function(s){
    });
    return false;
  }
</script>
{% endblock %}
{% from "_comments.html" import comments_render %}
{% block body %}
<div class="ask">
  <h1>{{ ask.title|e }}</h1>
  <div class="info">{{ ask.user|user_name_tag }} 发布关于 {{ ask.tags|tags_name_tag }} 的问题于 
    {{ ask.created_at|strftime }}, {{ ask.answers_count }} 个回答</div>
  <div class="md_body">{{ ask.body|md_body }}</div>
  <div class="action">
    {% if ask.comments|count == 0 %}
    <a href="#" onclick="return toggleAskComments();">给予评论</a>
    {% else %}
    <a href="#" onclick="return toggleAskComments();">{{ ask.comments|count }} 条评论</a>
    {% endif %}
    • {% if ask.flagged_users.count(current_user) == 0 %}
    <a href="#" class="flag" onclick="return flag(this);">收藏</a>
    {% else %}
    <a href="#" class="flag flagged" onclick="return flag(this);">已收藏</a>
    {% endif %}
  </div>
  {{ comments_render("ask",ask,xsrf_form_html) }}
</div>
<div class="answers">
  {% for item in answers %}
  <div id="answer_{{item.id}}" class="answer">
    <div class="vote_buttons">
      <a class="vote_up" onclick="return vote('{{ item.id }}',1);" href="#"></a>
      <a class="vote_down" onclick="return vote('{{ item.id }}',0);" href="#"></a>
    </div>
    <div class="avatar_border">
      {{ item.user|avatar(24) }}
    </div>
    <div class="answer_border">
      <div class="info">{{ item.user|user_name_tag }}</div>
      <div class="votes">
        {% if item.vote > 0 %}
          {{ item.vote }} 人有用, 
        {% elif item.vote < 0 %}
          {{ item.vote|abs }} 人觉得没有帮助, 
        {% endif %}
        {{ item.created_at|strftime }}
      </div>
      <div class="md_body">{{ item.body|md_body }}</div>
      <div class="action">
        {% if item.comments|count == 0 %}
        <a href="#" onclick="return toggleAnswerComments('{{ item.id }}');">给予评论</a>
        {% else %}
        <a href="#" onclick="return toggleAnswerComments('{{ item.id }}');">{{ item.comments|count }} 条评论</a>
        {% endif %}
        • <a class="vote_up" onclick="return vote('{{ item.id }}',1);" href="#">有用</a> 
        • <a class="vote_down" onclick="return vote('{{ item.id }}',0);" href="#">没有帮助</a>
      </div>
      {{ comments_render("answer",item,xsrf_form_html) }}
    </div>
  </div>
  {% endfor %}
</div>
<div class="ask from">
  <h2>回答</h2>
  {{ notice_message }}
  <form action="/ask/{{ ask.id }}/answer" id="answer_form" method="post">
    <div class="row">
      {{ xsrf_form_html() }}
      <div id="answer_body_buttons"></div>
      <textarea id="answer_body" name="answer_body" style="height:100px;" class="text long"></textarea><br />
      <div id="answer_body_preview" class="md_body"></div>
    </div>
    <div class="actions">
      <button type="submit">提交回答</button>
    </div>
  </form>
  <script type="text/javascript">
    setup_wmd({
      input: "answer_body",
      button_bar: "answer_body_buttons",
      preview: "answer_body_preview",
      output: "copy_html"
    });
  </script>
</div>
{% endblock %}