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

{% block title %}Issue #{{ issueid }}: {{issue.title | noJS(ignore="img") | safe }} - {{ repo.name }}{% endblock %}
{% set tag = "home"%}

{% block header %}
<link href="{{ url_for('static', filename='vendor/emojione/emojione.sprites.css') }}"
  rel="stylesheet" />
<link href="{{ url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}"
  rel="stylesheet" />
<link href="{{ url_for('static', filename='vendor/jquery.atwho/jquery.atwho.css') }}"
  rel="stylesheet" />
{% endblock %}

{% block repo %}
<div class="row m-t-2">
  <form action="{{ url_for('ui_ns.update_issue', username=username,
    namespace=repo.namespace, repo=repo.name, issueid=issueid)
    }}" method="post" onsubmit="return try_async_comment(this)">
  {{ form.csrf_token }}

  <div class="col-md-8">
  <h2>
    <span class="issueid label label-default">#{{ issueid }}</span>
    <span id="issuetitle">{{issue.title | noJS("img") | safe }}</span>
    {% if issue.private %}
      <span class="oi red-icon" data-glyph="lock-locked" title="Private issue"></span>
    {% endif %}
  </h2>

  <h5 class="text-muted">
    Created <a href="#" data-toggle="tooltip" title="{{
        issue.date_created.strftime('%b %d %Y %H:%M:%S')
      }}">{{ issue.date_created | humanize}}</a> by <span title="{{
      issue.user.html_title }}">{{ issue.user.user }}</span>
  </h5>
  {% if issue.last_updated %}
    <h5 class="text-muted">
      Modified <a href="#" data-toggle="tooltip" title="{{
        issue.last_updated.strftime('%b %d %Y %H:%M:%S')
      }}">{{ issue.last_updated | humanize}}</a>
    </h5>
  {% endif %}
  <br>

    {{ show_initial_comment(issue, username, repo,issueid, form) }}

    {% if attachments %}
      <section id="attachments">
        {{ show_attachments(attachments) }}
        <br>
      </section>
    {% endif %}

    <section id="comments">
      {% if issue.comments %}
        {% for comment in issue.comments %}
        {% if comment.notification %}
          <div class="card">
            <div class="card-header">
              <div>
                <div class="pull-xs-right text-muted">
                    <span title="{{ comment.date_created.strftime('%Y-%m-%d %H:%M:%S') }}">{{
                        comment.date_created | humanize }}</span>
                </div>
                <small>{{ comment.comment | markdown | noJS | safe }}</small>
              </div>
            </div>
          </div>
        {% else %}
          {{ show_comment(comment, comment.id, repo, username, issueid, form) }}
        {% endif %}
        {% endfor %}
      {% endif %}
    </section>

    <div class="card">
      <div class="card-header">

        <section class="issue_comment add_comment">
        {% if g.authenticated and form %}

            <label for="comment"><strong>Add new comment</strong></label>
            <small class="text-muted pull-xs-right">
              <span class="btn btn-sm btn-secondary inactive"
                aria-pressed="false" id="previewinmarkdown">Preview
              </span>
            </small>
            {% if repo.quick_replies %}
            {% include "quick_reply.html" %}
            {% endif %}
            <textarea class="form-control" rows=8 id="comment" name="comment"
                placeholder="Enter your comment here" tabindex=1></textarea>

            <div id="preview">
            </div>

          Select files OR drag them into the comment field above.
          <input id="file-picker" type="file" name="file" accept="image/*"
            multiple tabindex=3 />
          <fieldset id="progress" style="display: none">
            <div class="progress-trough">
              <div id="progress-bar" class="progress-bar">0%</div>
            </div>
          </fieldset>
          <a href="https://docs.pagure.org/pagure/usage/markdown.html"
             target="_blank" rel="noopener noreferrer">Markdown Syntax</a>
          <div>
            <input type="submit" class="btn btn-primary"
              value="Update Issue" tabindex=2 />
          </div>
        {% else %}
          <p>
            <a href="{{ url_for('auth_login', next=request.url) }}">Login</a>
            to comment on this ticket.
          </p>
        {% endif %}
        </section>

      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card">
      <div class="card-block">

          <fieldset class="form-group issue-metadata-display">
            <label><strong>Status</strong></label>
            <h2 id="status">
              <span class="label {%
                if issue.close_status|lower == 'invalid' %}label-danger{%
                elif issue.close_status|lower == 'fixed' %}label-success{%
                elif issue.close_status|lower == 'insufficient data' %}label-warning{%
                elif issue.close_status|lower == 'duplicate' %}label-default{%
                elif issue.status|lower == 'open' %}label-primary{%
                else %}label-info{%
                endif %}">{{ issue.status }}</span>
                {% if issue.status == 'Closed' and issue.close_status %}
                <small>
                as: {{ issue.close_status }}
                </small>
                {% endif %}
            </h2>
          </fieldset>

          {% if g.authenticated and (g.repo_user or g.fas_user.username == issue.user.user) %}
            {{ render_bootstrap_field(form.status,
              formclass="issue-metadata-form") }}
            {{ render_bootstrap_field(form.close_status,
              formclass="issue-metadata-form") }}
          {% endif%}

          <fieldset class="form-group issue-metadata-display">
            <label><strong>Tags</strong></label>
              <h4 id="taglist">
                {% for tag in issue.tags %}
                  <a id="tag-{{ tag.tag }}" title="{{ tag.tag_description }}"
                    style="background-color:{{ tag.tag_color}}"
                    class="label label-default"
                    href="{{ url_for('ui_ns.view_issues',
                        repo=repo.name,
                        username=username,
                        namespace=repo.namespace,
                        tags=tag.tag) }}">
                    {{ tag.tag }}
                  </a>
                {% endfor %}
              </h4>
          </fieldset>

          {% if g.authenticated and g.repo_user %}
          <fieldset class="form-group issue-metadata-form">
            <label for="tag"><strong>Tags</strong></label>
             <input id="tag" type="text" placeholder="tag1, tag2" name="tag"
                title="comma separated list of tags"
                value="{{ issue.tags_text | join(',') }}" />
          </fieldset>
          {% endif%}

          <fieldset class="form-group issue-metadata-display">
            <label><strong>Assignee</strong></label>
            <div id="assignee_plain">
              {% if issue.assignee %}
                  <a href="{{ url_for(
                    'ui_ns.view_issues',
                    repo=repo.name,
                    username=username,
                    namespace=repo.namespace,
                    assignee=issue.assignee.username)
                    }}" title="{{ issue.assignee.html_title }}">
                    {{ issue.assignee.username }}
                  </a>
                {% if g.authenticated and (issue.assignee.username == g.fas_user.username) %}
                  <button class="btn btn-sm pull-xs-right" id="drop-btn"
                      title="drop the assignment of this issue">
                    Drop
                  </button>
                {% endif %}
              {% else %}
                unassigned
              {% endif %}
              {% if g.authenticated and g.repo_user and issue.status|lower == 'open'
                and (not issue.assignee or issue.assignee.username != g.fas_user.username) %}
              <button class="btn btn-sm pull-xs-right" id="take-btn"
                title="assign this issue to you">
                  Take
              </button>
              {% endif %}
            </div>
          </fieldset>

          {% if g.authenticated and g.repo_user %}
          <fieldset class="form-group issue-metadata-form">
            <label for="assignee"><strong>Assignee</strong></label>
            <input class="form-control" name="assignee" id="assignee"
              placeholder="username"
              value="{{ issue.assignee.username or '' }}" />
          </fieldset>
          {% endif%}

          <fieldset class="form-group issue-metadata-display">
            <label><strong>Blocking</strong></label>
            <div id="blocklist">
              {% for ticket in issue.children %}
                <a id="block-{{ ticket.id }}" class="label label-default"
                  href="{{ url_for('ui_ns.view_issue',
                    repo=repo.name,
                    username=username,
                    namespace=repo.namespace,
                    issueid=ticket.id)
                  }}" >#{{ ticket.id }}</a>
              {% endfor %}
            </div>
          </fieldset>

          {% if g.authenticated and g.repo_user %}
            <fieldset class="form-group issue-metadata-form">
              <label for="blocking"><strong>Blocking</strong></label>
              <input class="form-control" id="blocking" type="text"
                placeholder="issue blocking" name="blocking"
                value="{{ issue.blocking_text | join(',') }}" />
            </fieldset>
          {% endif%}

          <fieldset class="form-group issue-metadata-display">
            <label><strong>Depending on</strong></label>
            <div id="dependlist">
              {% for ticket in issue.parents %}
                <a id="depend-{{ ticket.id }}" class="label label-default"
                  href="{{ url_for('ui_ns.view_issue',
                    repo=repo.name,
                    username=username,
                    namespace=repo.namespace,
                    issueid=ticket.id)
                    }}">#{{ ticket.id }}</a>
              {% endfor %}
            </div>
          </fieldset>

          {% if g.authenticated and g.repo_user %}
            <fieldset class="form-group issue-metadata-form">
              <label for="depending"><strong>Depending on</strong></label>
              <input class="form-control" id="depending" type="text"
                placeholder="issue depending" name="depending"
                value="{{ issue.depending_text | join(',') }}" />
            </fieldset>
          {% endif%}

          {% if repo.priorities %}
          <fieldset class="form-group issue-metadata-display">
            <label><strong>Priority</strong></label>
            <div id="priority_plain">
              {% if issue.priority is not none  %}
              <span >{{ repo.priorities[issue.priority | string] }}</span>
              {% endif %}
            </div>
          </fieldset>
          {% if g.authenticated and g.repo_user %}
            {{ render_bootstrap_field(form.priority,
              formclass="issue-metadata-form") }}
          {% endif%}

          {% endif %}

          {% if repo.milestones %}
          <fieldset class="form-group issue-metadata-display">
            <label><strong>Milestone</strong></label>
            <div id="milestone_plain">
              {% if issue.milestone %}
              <span>
                <a href="{{ url_for(
                    'ui_ns.view_roadmap',
                    repo=repo.name,
                    username=username,
                    namespace=repo.namespace,
                    milestone=issue.milestone) }}">
                  {{ issue.milestone }}
                </a>
              </span>
              {% endif %}
            </div>
          </fieldset>
          {% if g.authenticated and g.repo_user %}
            {{ render_bootstrap_field(form.milestone,
              formclass="issue-metadata-form") }}
          {% endif%}

          {% endif %}

          {% if issue.private %}
          <fieldset class="form-group issue-metadata-display">
            <label><strong class="red-icon">Private</strong></label>
          </fieldset>
          {% endif %}
          {% if g.authenticated and g.repo_user %}
            {{ render_bootstrap_field(form.private,
              formclass="issue-metadata-form") }}
          {% endif%}

          <input type="submit" class="btn btn-primary issue-metadata-form" value="Update">
          <a class="btn btn-secondary issue-metadata-form editmetadatatoggle">
            Cancel
          </a>
          {% if g.authenticated and (g.repo_user or g.fas_user.username == issue.user.user) %}
            <a class="btn btn-secondary issue-metadata-display editmetadatatoggle">
              Edit Metadata
            </a>
          {% endif %}
      </div>
    </div>
  </div>

  {% if g.authenticated %}
    {% if subscribers %}
      <div class="col-md-4">
        <div class="card">
          <div class="card-block">
            <label><strong>Subscribers</strong> ({{
              subscribers | length }})</label>
            <div id="subscribers_list">
            {% for subscriber in subscribers %}
                <a href="{{ url_for('ui_ns.view_user', username=subscriber)
                }}" title="{{ subscriber }}">{{
                  subscriber |avatar(size=24) | safe
                }}</a>
            {% endfor %}
            </div>
          </div>
        </div>
      </div>
    {% endif %}

    <div class="col-md-4 card-block">
      <button class="btn btn-md" id="subcribe-btn"
      {% if g.fas_user.username in subscribers -%}
        title="Unsubscribe from this issue">Unsubscribe
      {%- else -%}
        title="Subscribe to this issue">Subscribe
      {%- endif -%}
      </button>
    </div>
  {% endif %}

  {% if repo.issue_keys %}
  <div class="col-md-4 right">
    <div class="card">
      <div class="card-block">

        {% for field in repo.issue_keys %}
          <fieldset class="form-group issue-custom-display">
            <label><strong>{{ field.name }}</strong></label>
            <div id="{{ field.name | replace(' ', '_') }}_plain">
              <p>
                {% if field.name in knowns_keys %}
                  {% if field.key_type == 'link' %}
                    {% for link in knowns_keys[field.name].value.split(',') %}
                      <a target="_blank" rel="noopener noreferrer" href="{{ link }}">{{ link }}</a>
                      <br>
                    {% endfor %}
                  {% else %}
                    {{ knowns_keys[field.name].value }}
                  {% endif %}
                {% endif %}
              </p>
            </div>
          </fieldset>
          {% if g.authenticated and g.repo_user %}
            <fieldset class="form-group issue-custom-form">
              <label for="field"><strong>{{ field.name }}</strong></label>
              {% if field.key_type == 'list' %}
                <select class="form-control"
                    name="{{ field.name }}"
                    id="{{ field.name | replace(' ', '_') }}">
                  <option value="None">None</option>
                  {% for item in field.data or [] %}
                    <option value="{{item}}" {% if field.name in knowns_keys and item == knowns_keys[field.name].value %} selected {% endif %}>
                      {{ item }}
                    </option>
                  {% endfor %}
                </select>
              {% else %}
                <input
                  {%- if field.key_type == 'boolean' %} type="checkbox" {% endif %}
                  class="form-control" name="{{ field.name }}" id="{{ field.name }}"
                  {%- if field.name in knowns_keys %}
                    {% if field.key_type == 'boolean'%}
                      {% if knowns_keys[field.name].value in ['true', 'on', '1'] %}checked{% endif %}
                    {% else %} value="{{ knowns_keys[field.name].value }}"
                    {% endif %}
                  {%- endif -%} />
              {% endif %}
            </fieldset>
          {% endif %}
        {% endfor %}

        <input type="submit" class="btn btn-primary issue-custom-form" value="Update">
        <a class="btn btn-secondary issue-custom-form edit_custom_toggle">
          cancel
        </a>
        {% if g.authenticated and g.repo_user %}
          <a class="btn btn-secondary issue-custom-display edit_custom_toggle">
            Edit Metadata
          </a>
        {% endif %}

      </div>
    </div>
  </div>
  {% endif %}

  </form>
</div>

{% endblock %}

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

<script type="text/javascript" src="{{ url_for('static', filename='vendor/selectize/selectize.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery.caret/jquery.caret.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery.atwho/jquery.atwho.min.js') }}"></script>

<script type="text/javascript">

{% if g.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);
  });

  $.get("{{ url_for('api_ns.api_users') }}", {
    pattern: '*'
  }).done(function(resp) {
    var userConfig = {
      at: '@',
      data: resp['mention'],
      insertTpl: '@${username}',
      displayTpl: "<li><img src=\"${image}\"> ${username} <small>${name}</small></li>",
      searchKey: "username"
    }
    $("#comment").atwho(userConfig);

    $('#assignee').selectize({
      valueField: 'user',
      labelField: 'user',
      searchField: 'user',
      maxItems: 1,
      create: false,
      load: function(query, callback) {
        callback( resp.users.map(function(x) { return { user: x }; }) );
      }
    });

  });
   $.when($.get("{{ url_for('api_ns.api_view_issues',
                            repo=repo.name,
                            username=username,
                            namespace=repo.namespace,
                            status='all') }}"),
          $.get("{{ url_for('api_ns.api_pull_request_views',
                            repo=repo.name,
                            username=username,
                            namespace=repo.namespace,
                            status='all') }}")
   ).done(function(issuesResp, prResp) {
     // 0 is the api response
     var issuesAndPrs = issuesResp[0]['issues'].concat(prResp[0]['requests']);
     var data = $.map(issuesAndPrs, function(ticket, idx) {
       return {
         name: ticket.id.toString(),
         title: $('<div>').text(ticket.title).html()
       }
     });
     var issueAndPrConfig = {
       at: '#',
       data: data,
       insertTpl: '#${name}',
       displayTpl: "<li>#${name}<small> ${title}</small></li>",
     }
     $("#comment").atwho(issueAndPrConfig);
   })
 });
{% endif %}
function setup_edit_btns() {
  $(".edit_btn").unbind();
  $(".edit_btn").click(function() {
    var commentid = $( this ).attr('data-comment');
    var _url = '{{ request.base_url }}' + '/comment/' + commentid + '/edit';
    $.ajax({
        url: _url + '?js=1',
        type: 'GET',
        dataType: 'html',
        success: function(res) {
            var el = $('#comment-' + commentid);
            var sec = el.parent().find('.issue_comment');
            $(sec).hide();
            el.parent().find('.issue_actions').hide();
            $(sec).after(res);
            cancel_edit_btn();
        },
        error: function() {
            alert('Could not make edit work');
        }
    });
    return false;
  });
};

function cancel_edit_btn() {
  $("#comment_update_cancel").unbind();
  $("#comment_update_cancel").click(
    function() {
      $(this).closest('#comments').find('.issue_comment').show();
      $(this).closest('#comments').find('.issue_actions').show();
      $(this).closest('.edit_comment').remove();
      return false;
    });
};

function setup_reply_btns() {
  $(".reply").unbind();
  $( ".reply" ).click(
    function() {
      if ($(this).attr('data-toggle')){
        var _section = $(this).closest('.card-block');
      } else {
        var _section = $(this).closest('.clearfix');
      }
      var _comment = _section.find('.comment_body');
      var _text = _comment.text().split("\n");
      var _output = new Array();
      for (cnt = 0; cnt < _text.length ; cnt ++) {
          _output[cnt] = '> ' + $.trim(_text[cnt]);
      }
      $( "#comment" ).val(_output.join("\n"));
    }
  ).click(function(){
    $('html, body').animate({
        scrollTop: $("#comment").offset().top
    }, 2000);
});
};

$(document).ready(function() {
  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;
  };

  {% if g.repo_user %}
  $('#closeticket').click(function(event){
    event.preventDefault();
    var closeForm = $('<form>', {
        'method': 'POST',
        'action': '{{
        url_for('ui_ns.delete_issue',
                 repo=repo.name,
                 username=username,
                 namespace=repo.namespace,
                 issueid=issueid) }}',
    }).append($('<input>', {
        'name': 'csrf_token',
        'value': '{{ form.csrf_token.current_token }}',
        'type': 'hidden'
    })).appendTo('body');
    if (confirm('Are you sure to delete this ticket? \nThis is final and cannot be un-done.')){
      closeForm.submit();
    }
    return false;
  });
  {% endif %}

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

});
</script>

{% if config['EVENTSOURCE_SOURCE'] and not issue.private %}
<script type="text/javascript"
  src="{{ url_for('static', filename='issue_ev.js') }}"></script>

<script type="text/javascript">
var source = null;
var sse = true;
if (!!window.EventSource) {
  source = new EventSource('{{ config["EVENTSOURCE_SOURCE"]
    + request.script_root + request.path }}');
  source.addEventListener('error', function(e) {
    sse = false;
  }, false);
}

window.onbeforeunload = function() {
    source.close()
};

source.addEventListener('message', function(e) {
  console.log(e.data);
  var data = $.parseJSON(e.data);
  var _issues_url ='{{
    url_for('ui_ns.view_issues',
            repo=repo.name,
            username=username,
            namespace=repo.namespace)}}';
  var _api_issues_url ='{{
    url_for('api_ns.api_view_issue',
            repo=repo.name,
            username=username,
            namespace=repo.namespace,
            issueid='-123456789')}}';
  var _issue_url ='{{
    url_for('ui_ns.view_issue',
            repo=repo.name,
            username=username,
            namespace=repo.namespace,
            issueid='-123456789')}}';
  var _roadmap_url ='{{
    url_for('ui_ns.view_roadmap',
            repo=repo.name,
            username=username,
            namespace=repo.namespace,
            milestone='-123456789')}}';
  process_event(data, "{{ issue.uid }}", _issue_url,
                _issues_url, _api_issues_url, _roadmap_url,
                "{{ g.fas_user.username if g.authenticated or '' }}");
  setup_edit_btns();
  setup_reply_btns();

  }, false);

{% if g.authenticated and form %}
function set_ui_for_comment(setting){
  if (setting == false) {
    $(document.body).find('input[type="submit"]').removeAttr("disabled");
    document.body.style.cursor = 'default';
  } else {
    $(document.body).find('input[type="submit"]').attr("disabled", "disabled");
    document.body.style.cursor = 'wait';
  }
}
function try_async_comment(form) {
  console.log('Submitting form:');
  console.log(form);
  set_ui_for_comment(true);
  var _data = $(form).serialize();
  var btn = $(document.activeElement);
  if (btn[0].name == 'drop_comment'){
    _data += '&drop_comment=' + btn[0].value;
    set_ui_for_comment(false);
    return true;
  }
  if (!sse) {
    $(form).off('submit');
    form.submit();
    return false;
  }
  var _url = form.action + "?js=1";
  $.post( _url, _data )
    .done(function(data) {
      if(data == 'ok') {
        {# The event-source server will automatically refresh the UI #}
        $('#comment').val('');
        $('#preview').html('');
        $('#previewinmarkdown').addClass('inactive');
        $('#previewinmarkdown').removeClass('active');
        $('#preview').hide();
        $('#comment').show();
        $('#comments').find('.comment_body').show();
        $('#comments').find('.edit_comment').remove();
        $( ".issue-metadata-form" ).hide();
        $( ".issue-metadata-display" ).show();
        $( ".issue-custom-form" ).hide();
        $( ".issue-custom-display" ).show();
        set_ui_for_comment(false);
      } else {
        // Make the browser submit the form sync
        $(form).off('submit');
        form.submit();
      }
    })
    .fail(function() {
      // Make the browser submit the form sync
      $(form).off('submit');
      form.submit();
    })
  return false;
};
{% endif %}

</script>
{% endif %}
<script type="text/javascript">

{% if g.authenticated and g.repo_user %}
function take_issue(){
  var _url = "{{ url_for('api_ns.api_assign_issue',
            repo=repo.name, namespace=repo.namespace, username=username,
            issueid=issueid) }}";
  var _data = {assignee: "{{ g.fas_user.username }}"};
  $.post (_url, _data ).done(
    function(data) {
      var _user_url = '\n<a href="{{ url_for("ui_ns.view_issues", repo=repo.name, username=username) }}'
        + '?assignee={{ g.fas_user.username }}">'
        + '{{ g.fas_user.username }}</a>'
        + '<button class="btn btn-sm pull-xs-right" id="drop-btn" title="drop the assignment of this issue">Drop</button>';
      $('#assignee_plain').html(_user_url);
      $('#assignee').val("{{ g.fas_user.username }}");
      setup_btn_take_drop();
    }
  )
  return false;
}
{% endif %}

{% if g.authenticated and (
    g.repo_user
    or issue.user.user == g.fas_user.username
    or issue.assignee.user == g.fas_user.username) %}
function drop_issue(){
  var _url = "{{ url_for('api_ns.api_assign_issue',
            repo=repo.name, namespace=repo.namespace, username=username,
            issueid=issueid) }}";
  var _data = {assignee: ""};
  $.post( _url, _data ).done(
    function(data) {
      var _user_url = '\nunassigned'
        + '<button class="btn btn-sm pull-xs-right" id="take-btn" title="assign this issue to you">Take</button>';
      $('#assignee_plain').html(_user_url);
      $('#assignee').val("");
      setup_btn_take_drop();
    }
  )
  return false;
}
{% endif %}

function setup_btn_take_drop(){
  {% if g.authenticated and g.repo_user %}
  $("#take-btn").click(take_issue)
  {% endif %}
  {% if g.authenticated and (
    g.repo_user
    or issue.user.user == g.fas_user.username
    or issue.assignee.user == g.fas_user.username) %}
  $("#drop-btn").click(drop_issue);
  {% endif %}
}

$( document ).ready(function() {


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

  var folder = '{{url_for("static", filename="emoji/png/") }}';
  var json_url = '{{ url_for("static", filename="vendor/emojione/emoji_strategy.json") }}';
  emoji_complete(json_url, folder);

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

  $( ".editmetadatatoggle" ).click(
    function() {
      $( ".issue-metadata-form" ).toggle();
      $( ".issue-metadata-display" ).toggle();
    }
  );

  $( ".edit_custom_toggle" ).click(
    function() {
      $( ".issue-custom-form" ).toggle();
      $( ".issue-custom-display" ).toggle();
    }
  );

  $('#blocking').selectize({
    plugins: ['remove_button'],
    valueField: 'id',
    labelField: 'id',
    searchField: ['id', 'title'],
    preload: 'focus',
    render: {
      option: function(item, escape) {
        return '<div><span>'+escape(item.id)+'</span> <span>'+escape(item.title)+'</span></div>';
      },
      item: function(item, escape) {
        return '<div><span>#'+escape(item.id)+'</span></div>';
      },
    },
    create: false,
    load: function(query, callback) {
      $.getJSON(
        "{{ url_for('api_ns.api_view_issues',
                    repo=repo.name,
                    username=username,
                    namespace=repo.namespace) }}",
        function( data ) {
          issues = data.issues.filter(function(el) {
            return el.id !== {{issue.id}};
          });
          callback(issues);
        }
      );
    }
  });

  $('#depending').selectize({
    plugins: ['remove_button'],
    valueField: 'id',
    labelField: 'id',
    searchField: ['id', 'title'],
    preload: 'focus',
    render: {
      option: function(item, escape) {
        return '<div><span>'+escape(item.id)+'</span> <span>'+escape(item.title)+'</span></div>';
      },
      item: function(item, escape) {
        return '<div><span>#'+escape(item.id)+'</span></div>';
      },
    },
    create: false,
    load: function(query, callback) {
      $.getJSON(
        "{{ url_for('api_ns.api_view_issues',
                    repo=repo.name,
                    username=username,
                    namespace=repo.namespace) }}",
        function( data ) {
          issues = data.issues.filter(function(el) {
            return el.id !== {{issue.id}};
          });
          callback(issues);
        }
      );
    }
  });

  var available_tags = [];
  {%for tog in tag_list %}
    available_tags.push("{{tog.tag}}");
  {%endfor%}
  var items = available_tags.map(function(x) { return { item: x }; });

  $('#tag').selectize({
    delimiter: ',',
    options: items,
    persist: false,
    create: false,
    labelField: "item",
    valueField: "item",
    searchField: ["item"],
  });

  $( "#preview" ).hide();
  $( "#previewinmarkdown" ).click(
    function(event, ui) {
      if ($( "#previewinmarkdown" ).hasClass("inactive")){
        var _text = $( "#comment" ).val();
        var _url = "{{ url_for('ui_ns.markdown_preview',
                        repo=repo.name,
                        user=repo.user.user if repo.is_fork,
                        namespace=repo.namespace) | safe}}";
        $.ajax({
          url: _url ,
          type: 'POST',
          data: {
            content: _text,
            csrf_token: "{{ form.csrf_token.current_token }}",
          },
          dataType: 'html',
          success: function(res) {
            var preview = emojione.toImage(res)
            $( "#preview" ).html(preview);
            $( "#previewinmarkdown" ).removeClass("inactive");
            $( "#previewinmarkdown" ).addClass("active");
            $( "#comment" ).hide();
            $( "#preview" ).show();
          },
          error: function() {
            alert('Unable to generate preview!');
          }
        });
        return false;
      } else if ($( "#previewinmarkdown" ).hasClass("active")){
        $( "#previewinmarkdown" ).addClass("inactive");
        $( "#previewinmarkdown" ).removeClass("active");
        $( "#comment" ).show();
        $( "#preview" ).hide();
      }
    }
  );

  {% if g.authenticated and (
    g.repo_user
    or issue.user.user == g.fas_user.username
    or issue.assignee.user == g.fas_user.username) %}
  setup_btn_take_drop();
  {% endif %}

  {% if g.authenticated %}
  function set_up_subcribed() {
    $("#subcribe-btn").click(function(){
      var _url = "{{ url_for(
        'api_ns.api_subscribe_issue',
        repo=repo.name,
        username=username,
        namespace=repo.namespace,
        issueid=issueid
        ) }}";
      var _btn = $("#subcribe-btn");
      var _data = {};
      if (_btn.text() == 'Unsubscribe'){
        _data.status = false;
      } else {
        _data.status = true;
      }
      console.log(_data);
      $.post( _url, _data ).done(
        function(data) {
          var _btn = $("#subcribe-btn");
          if (_btn.text() == 'Subscribe'){
            _btn.text('Unsubscribe');
          } else {
            _btn.text('Subscribe');
          }
          return false;
        }
      )
      return false;
    });
  };
  set_up_subcribed();
  {% endif %}

});
</script>

{% if repo.quick_replies %}
<script type="text/javascript" src="{{ url_for('static', filename='quick_reply.js') }}"></script>
{% endif %}

{% endblock %}