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

{% block title %}{% if not type or type == 'new'
    %}New issue{% elif type and type == 'edit'
    %}Edit issue #{{ issueid }} {% endif %} - {{ repo.name }}{% endblock %}
{% set tag = "home" %}

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


{% block repo %}
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="card">
      <div class="card-header">
        {% if not type or type == 'new' %}
        New issue
        {% elif type and type == 'edit' %}
        Edit issue #{{ issueid }}
        {% endif %}
      </div>
      <div class="card-block">
        {% if not type or type == 'new' %}
          <form action="{{ url_for('.new_issue',
                           username=username, repo=repo.name) }}" method="post"
                enctype="multipart/form-data">

        {% elif type and type == 'edit' %}
          <form action="{{ url_for('.edit_issue', username=username,
                             repo=repo.name, issueid=issueid) }}" method="post"
                enctype="multipart/form-data">
        {% endif %}
        {{ render_bootstrap_field(form.title, field_description="Gist of your issue") }}
        {% if type == 'edit' %}
            {{ render_bootstrap_field(form.status, field_description="bug status") }}
        {% endif %}
        {{ render_bootstrap_field(form.private, field_description="Do you want to keep the issue private?") }}
          <fieldset class="form-group">
            <label for="issue_content"><strong>Description</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>
            <textarea class="form-control" rows="8" id="issue_content" name="issue_content"
                placeholder="Describe your issue">
              {%- if issue %}{{ issue.content }}{% endif -%}
            </textarea>
            <div>

              {% if form.issue_content.errors %}
              <span class="pull-xs-right text-danger">
                <small>
                {% for error in form.issue_content.errors %}
                  {{ error }}&nbsp;
                {% endfor %}
                </small>
              </span>
              {% endif %}
            </div>
            <div id="preview">
            </div>
          </fieldset>
        Attach file <input id="file-picker" type="file" name="filestream" accept="image/*" multiple>

        <p class="buttons indent">
          {% if not type or type == 'new' %}
          <input type="submit" class="btn btn-primary" value="Create">
          {% elif type and type == 'edit' %}
          <input type="submit" class="btn btn-primary" value="Update">
          {% endif %}
          <input type="button" value="Cancel" class="btn btn-secondary" onclick="history.back();">
          {{ form.csrf_token }}
        </p>
      </form>
      </div>
    </div>

    {% if authenticated and repo_admin and type and type == 'edit' %}
    <form method="post" class="pull-xs-right" action="{{
        url_for('.delete_issue',
                username=username, repo=repo.name, issueid=issueid) }}">
      <button class="btn btn-danger" type="submit"
          onclick="return confirm('Are you sure to delete this ticket? \nThis is final and cannot be un-done.');"
          title="Delete this ticket">
        <span class="icon icon-trash blue"></span>
        Delete issue
      </button>
      {{ form.csrf_token }}
    </form>
    {% endif %}

  </div>
</div>

{% endblock %}

{% block jscripts %}
{{ super() }}
<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">
{% if authenticated and form %}
$(document).ready(function() {
  // Set up the handler for the file input box.
  $("#file-picker").on("change", function() {
    //doUpload("{{ form.csrf_token.current_token }}", this.files);
    var _txt = $("#issue_content").val();
    if (_txt) {
      _txt += '\n';
    }
    var _loc = "{{ url_for('view_issue_raw_file', repo=repo.name, username=username, filename='') }}" + this.file;

    $("#issue_content").val(_txt + '<!!image>');
  });

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

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

});

{% endif %}

$(function() {
  $( "#preview" ).hide();
  $( "#previewinmarkdown" ).click(
    function(event, ui) {
      if ($( "#previewinmarkdown" ).hasClass("inactive")){
        var _text = $( "#issue_content" ).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) {
            var preview = emojione.toImage(res);
            $( "#preview" ).html(preview);
            $( "#previewinmarkdown" ).removeClass("inactive");
            $( "#previewinmarkdown" ).addClass("active");
            $( "#issue_content" ).hide();
            $( "#preview" ).show();
          },
          error: function() {
            alert('Unable to generate preview!'+error);
          }
        });
        return false;
      } else if ($( "#previewinmarkdown" ).hasClass("active")){
        $( "#previewinmarkdown" ).addClass("inactive");
        $( "#previewinmarkdown" ).removeClass("active");
        $( "#issue_content" ).show();
        $( "#preview" ).hide();
      }
    }
  );
});
</script>
{% endblock %}