{% extends "repo_master.html" %}
{% from "_formhelper.html" import render_field %}

{% block title %}Issue #{{ issueid }} - {{ repo.name }}{% endblock %}
{%block tag %}home{% endblock %}

{% macro show_comment(user, date, content) %}
  <section class="issue_comment">
    <header>
      {{ user.user | avatar(16) | safe }}
      <a href="{{ url_for('view_user', username=user.user)}}">
        {{ user.user }}
      </a> - <span title="{{ date }}">{{ date | humanize}}</span>
      <aside class="issue_action">
        <a class="reply" title="Reply to this comment - loose formating">
          reply
        </a>
      </aside>
    </header>
    <div class="comment_body">
      {% autoescape false %}
        {{ content | markdown }}
      {% endautoescape %}
    </div>
  </section>
{% endmacro %}

{% block repo %}

<h2>
    <span class="issueid">#{{ issueid }}</span> {{ issue.title }}
    {% if authenticated %}
    -  <a href="{{ url_for('edit_issue', username=username,
                  repo=repo.name, issueid=issueid) }}">
        Edit</a>
    {% endif %}
    <aside class="issue_action">
    {% if authenticated and form %}
      <form action="{{ url_for('view_issue', username=username,
               repo=repo.name, issueid=issueid) }}" method="post">
        {{ render_field(form.status) }}
        <input type="submit" class="submit positive button" value="Update">
        {{ form.csrf_token }}
      </form>
    {% else %}
        Status: {{ issue.status }}
    {% endif %}
    </aside>
</h2>

<section id="tags">
    Tags:
    {% for tag in issue.tags %}
    <a href="{{ url_for('view_issues', username=username,
               repo=repo.name, tags=tag.tag) }}">
        {{ tag.tag }}</a>{% if not loop.last %},{% endif %}
    {% endfor %}
    {% if authenticated and form_tag %}
      <form action="{{ url_for('add_tag_issue', username=username,
               repo=repo.name, issueid=issueid) }}" method="post">
        {{ render_field(form_tag.tag, placeholder="tag1,tag2") }}
        <input id="add_tags" type="submit"
            class="submit positive button" value="Add">
        {{ form_tag.csrf_token }}
      </form>
    {% endif %}
</section>

{{ show_comment(issue.user, issue.date_created, issue.content) }}

{% if issue.comments %}
  {% for comment in issue.comments %}
    {{ show_comment(comment.user, comment.date_created, comment.comment) }}
  {% endfor %}
{% endif %}

<section class="issue_comment add_comment">
{% if authenticated %}
  <header>
    <label for="comment">Add new comment</label>
    (supports the <a href="http://daringfireball.net/projects/markdown/syntax"
      target="_blank">Markdown syntax</a>)
  </header>
  <div id="tabs">
    <ul>
      <li><a href="#edit">Comment</a></li>
      <li><a href="#preview">Preview</a></li>
    </ul>
    <div id="edit">
      <form action="{{ url_for('add_comment_issue', username=username,
                       repo=repo.name, issueid=issueid) }}" method="post">

        <div>
          <textarea id="comment" name="comment" placeholder="Enter your comment here"></textarea>
          {{ form_comment.csrf_token }}
        </div>
        <div>
          <input type="submit" class="submit positive button" value="Comment">
          <input type="button" value="Clear" id="clear_comment" />
        </div>
      </form>
    </div>
    <div id="preview">
    </div>
  </div>
{% else %}
  <p><a href="{{ url_for('auth_login') }}">Login</a> to comment on this ticket.</p>
{% endif %}
</section>

{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript">
$(function() {
  $( "#tabs" ).tabs();

  $( "#tabs" ).on('tabsactivate',
    function(event, ui) {
      if (ui.newPanel.selector == '#preview') {
        var _text = $( "#comment" ).val();
        var _url = "{{ url_for('markdown_preview') }}";
          $.ajax({
              url: _url ,
              type: 'POST',
              data: {content: _text},
              dataType: 'html',
              success: function(res) {
                  $( "#preview" ).html(res);
              },
              error: function() {
                  alert('Unable to generate preview!');
              }
          });
          return false;
      }
    }
  );

  $( ".reply" ).click(
    function() {
        var _section = $(this).parent().parent().parent();
        var _comment = _section.find('.comment_body');
        var _text = _comment.text().split("\n");
        var _output = new Array();
        for (cnt = 0; cnt < _text.length - 1; cnt ++) {
            _output[cnt] = '> ' + jQuery.trim(_text[cnt + 1]);
        }
        $( "#comment" ).val(_output.join("\n"));
    }
  );

  $( "#clear_comment").click(
    function() {
      $( "#comment" ).val("");
    }
  );

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