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

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

{% block header %}
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
  rel="stylesheet" />
<link href="{{ url_for('static', filename='emoji/emojione.sprites.css') }}"
  rel="stylesheet" />
{% endblock %}

{% block repo %}

{% if authenticated and form %}
  <form action="{{ url_for('update_issue', username=username,
           repo=repo.name, issueid=issueid) }}" method="post"
           enctype="multipart/form-data">
  {{ form.csrf_token }}
{% endif %}

<h2>
    <span class="issueid">#{{ issueid }}</span> {{ issue.title }}
    {% if authenticated and repo_admin %}
    -  <a href="{{ url_for('edit_issue', username=username,
                  repo=repo.name, issueid=issueid) }}">
        Edit</a>
    {% endif %}
    <aside class="issue_action">
    {% if authenticated and repo_admin %}
        {{ render_field(form.status) }}
        <input type="submit" class="submit positive button" value="Update">
    {% 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 repo_admin %}
      <input id="tag" type="text" value="{{ issue.tags_text | join(',') }}"
        placeholder="tag1, tag2" name="tag" title="comma separated list of tags">
    {% endif %}
</section>

<section id="assigned">
    Assigned:
    {% if issue.assignee %}
    <a href="{{ url_for('view_issues', username=username,
               repo=repo.name, assignee=issue.assignee.username) }}">
        {{ issue.assignee.username }}</a>
    {% endif %}
    {% if authenticated %}
        <input value="{{ issue.assignee.username or '' }}"
          name="assignee" id="assignee" placeholder="username" >
    {% endif %}
</section>

<section id="blocks">
    Blocking:
    {% if issue.parents %}
    {% for ticket in issue.parents %}
        <a href="{{ url_for('view_issue', username=username,
                  repo=repo.name, issueid=ticket.id) }}">
        {{ ticket.id }}</a>{%- if not loop.last -%},{%- endif -%}
    {% endfor %}
    {% endif %}

    {% if authenticated %}
        <input id="blocks" type="text"
            placeholder="issue blocked" name="blocks"
            value="{{ issue.blocks_text | join(',') }}">
    {% endif %}
</section>

<section id="depends">
    Depends on:
    {% if issue.children %}
    {% for ticket in issue.children %}
        <a href="{{ url_for('view_issue', username=username,
                  repo=repo.name, issueid=ticket.id) }}">
        {{ ticket.id }}</a>{%- if not loop.last -%},{%- endif -%}
    {% endfor %}
    {% endif %}

    {% if authenticated %}
        <input id="depends" type="text"
            placeholder="issue depending" name="depends"
            value="{{ issue.depends_text | join(',') }}">
    {% endif %}
</section>

{{ show_comment(issue, 0, repo, username, issueid, form) }}

{% if issue.comments %}
  {% for comment in issue.comments %}
    {{ show_comment(comment, loop.index, repo, username, issueid, form, repo_admin) }}
  {% endfor %}
{% endif %}

<section class="issue_comment add_comment">
{% if authenticated and form %}
  <header>
    <label for="comment">Add new comment</label>
    (supports the <a href="http://daringfireball.net/projects/markdown/syntax"
      target="_blank">Markdown syntax</a>)
  </header>
  Select files OR drag them into the comment field below.
  <input id="file-picker" type="file" name="file" accept="image/*" multiple>
  <fieldset id="progress" style="display: none">
    <div class="progress-trough">
      <div id="progress-bar" class="progress-bar">0%</div>
    </div>
  </fieldset>
  <div id="tabs">
    <ul>
      <li><a href="#edit">Comment</a></li>
      <li><a href="#preview">Preview</a></li>
    </ul>
    <div id="edit">
      <div>
        <textarea id="comment" name="comment" placeholder="Enter your comment here"></textarea>
      </div>
    </div>
    <div id="preview">
    </div>
    <div>
      <input type="submit" class="submit positive button" value="Comment">
      <input type="button" value="Clear" id="clear_comment" />
    </div>
  </div>
{% else %}
  <p><a href="{{ url_for('auth_login', next=request.url) }}">Login</a> to comment on this ticket.</p>
{% endif %}
</section>

{% if authenticated and form %}
  </form>
{% endif %}

{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript">
  var UPLOAD_URL = "{{ url_for('upload_issue', repo=repo.name, issueid=issue.id, username=username) }}";
</script>
<script type="text/javascript"
    src="{{ url_for('static', filename='emoji/jquery.textcomplete.min.js') }}">
</script>
<script type="text/javascript"
    src="{{ url_for('static', filename='emoji/emojione.min.js') }}">
</script>
<script type="text/javascript"
  src="{{ url_for('static', filename='upload.js') }}">
</script>
<script type="text/javascript">

var emojiStrategy;
$.getJSON(
  '{{ url_for("static", filename="emoji/emoji_strategy.json") }}',
  function( data ) {
    emojiStrategy =  data;
  }
);

{% if authenticated and form %}
$(document).ready(function() {
  // Set up the drag/drop zone.
  initDropbox("{{ form.csrf_token.current_token }}", "#comment");

  // Set up the handler for the file input box.
  $("#file-picker").on("change", function() {
    doUpload("{{ form.csrf_token.current_token }}", this.files);
  });


  $("textarea").textcomplete([ {
    match: /\B:([\-+\w]*)$/,
    search: function (term, callback) {
      var results = [];
      var results2 = [];
      var results3 = [];
      $.each(emojiStrategy,function(shortname,data) {
        if(shortname.indexOf(term) > -1) { results.push(shortname); }
        else {
          if((data.aliases !== null) && (data.aliases.indexOf(term) > -1)) {
            results2.push(shortname);
          }
          else if((data.keywords !== null) && (data.keywords.indexOf(term) > -1)) {
            results3.push(shortname);
          }
        }
      });

      if(term.length >= 3) {
        results.sort(function(a,b) { return (a.length > b.length); });
        results2.sort(function(a,b) { return (a.length > b.length); });
        results3.sort();
      }
      var newResults = results.concat(results2).concat(results3);

      callback(newResults);
    },
    template: function (shortname) {
      return '<span class="emojione-'+emojiStrategy[shortname].unicode+'" title=":rabbit:"></span>:'+shortname+':';
    },
    replace: function (shortname) {
      return ':'+shortname+': ';
    },
    index: 1,
    maxCount: 10
  }
  ],{
    footer: '<a href="http://www.emoji.codes" target="_blank">Browse All<span class="arrow">&raquo;</span></a>'
  });
});
{% endif %}

$(function() {
  emojione.imagePathPNG = '{{url_for("static", filename="emoji/png/") }}';
  emojione.imageType = 'png';
  emojione.sprites = true;

  $( "#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,
                csrf_token: "{{ form.csrf_token.current_token }}",
              },
              dataType: 'html',
              success: function(res) {
                  $( "#preview" ).html(emojione.toImage(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("");
    }
  );

  var cache = {};
  $( "#tag" ).autocomplete({
    source: function( request, response ) {
      var pattern = request.term;
      if ( pattern in cache ) {
        response( cache[ pattern ] );
        return;
      }

      $.getJSON(
        "{{ url_for('api_ns.api_project_tags', repo=repo.name, username=username) }}", {
          pattern: request.term
        },
        function( data ) {
          cache[ pattern ] = data.tags;
          response( data.tags );
        }
      );
    },
    minLength: 0,
    delay: 200,
  });

  $('#assignee').autocomplete({
    source: function( request, response ) {
      $.getJSON(
        "{{ url_for('api_ns.api_users') }}", {
          pattern: request.term
        },
        function( data ) {
          response( data.users );
        }
      );
    },
    minLength: 2,
    delay: 200,
  });

  var cur_hash = null;

  highlight_comment = function() {
    var _hash = window.location.hash;
    if (_hash != cur_hash) {
      $( cur_hash ).css(
        "background", "linear-gradient(to bottom, #ededed 0%, #fff 100%)"
      );
    };
    cur_hash = _hash;
    if ( _hash ) {
      $( _hash ).css(
        "background", "linear-gradient(to bottom, #eded98 0%, #fff 100%)"
      );
    };
    return false;
  };

  $(window.onload=highlight_comment());
  $(window).on('hashchange', highlight_comment);

  $(".comment_body").each(function(ind, obj) {
    var source = $(obj).html();
    var preview = emojione.toImage(source);
    $(obj).html(preview);
  });

});
</script>

{% endblock %}