{% extends "repo_master.html" %}
{% from "_formhelper.html" import show_comment, show_pr_initial_comment, render_bootstrap_field %}
{% from "_repo_renderdiff.html" import repo_renderdiff %}
{% from "_projectstring.html" import projectstring, projecticon %}

{% block title %}
  {%- if pull_request -%}
    PR#{{ requestid }}: {{ pull_request.title | noJS(ignore="img") | safe }}
  {%- elif form and (g.repo_committer or remote_git) -%}
    Create new Pull Request for {{ branch_to }}
  {%- else -%}
    Diff from {{ branch_from }} to {{ branch_to }}
  {%- endif
  %} - {{ repo.url_path }}
{% endblock %}

{% set tag = "home" %}

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

{% block repo %}

<h4 class="font-weight-bold">
  <div class="d-flex align-items-center">
    <div>
    {% if form and (g.repo_committer or remote_git) %}
      Create Pull Request
    {% else %}
      Diff
    {% endif%}
    </div>
    <div class="ml-auto">
      <div class="btn btn-outline-secondary border-0 disabled opacity-100 font-weight-bold">
          {% if diff %}
            {{diff_commits | length}} commit{{'s' if diff_commits | length > 1 }},
            {{diff.stats.files_changed}} file{{'s' if diff.stats.files_changed > 1 }} changed
          {% else %}
            no changes
          {% endif %}
      </div>
    </div>
    <div class="btn-group">
      {% if diff %}
      <span class="font-weight-bold btn btn-sm btn-success disabled opacity-100">+{{diff.stats.insertions}}</span>
      <span class="font-weight-bold btn btn-sm btn-danger disabled opacity-100">-{{diff.stats.deletions}}</span>
      {% else %}
      <span class="font-weight-bold btn btn-sm btn-success disabled">+0</span>
      <span class="font-weight-bold btn btn-sm btn-danger disabled">-0</span>
      {% endif %}
    </div>
  </div>
</h4>


<div class="row" id="pr-wrapper">
  <div class="col-md-12">

{% if form and (g.repo_committer or remote_git) %}
<section class="new_project">
  {% if remote_git and not (config.get('DISABLE_REMOTE_PR', True)) %}
  <form action="{{ url_for('ui_ns.new_remote_request_pull',
        repo=repo.name,
        username=username,
        namespace=repo.namespace,
        confirm=True) }}" id="new_remote_form" method="post">
    <input type="hidden" value="{{ branch_from }}" name="branch_from" />
    <input type="hidden" value="{{ branch_to }}" name="branch_to" />
    <input type="hidden" value="{{ remote_git }}" name="git_repo" />
  {% else %}
  <form action="{{ url_for('ui_ns.new_request_pull',
        repo=repo.name,
        username=username,
        namespace=repo.namespace,
        commitid=commitid,
        branch_from=branch_from,
        project_to=project_to,
    branch_to=branch_to) }}" method="post">
  {% endif %}
    <div class="p-b-1">
    Pull from
          <span class="badge badge-light badge-pill border border-secondary font-1em">
          {%- if remote_git -%}
            {{ remote_git }}
          {%- else -%}
            {%- if repo.is_fork -%}
              <i class="fa fa-code-fork"></i>&nbsp;
            {%- else -%}
              <i class="fa {{projecticon()}}"></i>&nbsp;
            {%- endif -%}
            {%- if repo.namespace -%}
              {{repo.namespace}}/
            {%- endif -%}
            {%- if repo.is_fork -%}
              {{ repo.user.user }}/
            {%- endif -%}
            {{repo.name}}
          {%- endif -%}
          </span>
          <span class="dropdown dropdown-btn">
          <a class="badge badge-secondary badge-pill border border-secondary dropdown-toggle pointer font-1em"
             data-toggle="dropdown">
            <span class="fa fa-random"></span>
            {{ branch_from }}
          </a>
          <div class="dropdown-menu">
            {% for br in parent_branches |reverse %}
              {% if br != branch_from %}
              <a class="dropdown-item branch_from_item pointer" data-value="{{br}}"><span class="fa fa-random"></span> {{ br }}</a>
              {% endif %}
            {% endfor %}
          </div>
          </span>
      to
      <span>
      <span class="badge badge-light badge-pill border border-secondary dropdown-toggle font-1em" id="family-toggle" data-toggle="dropdown">
        {%- if parent.is_fork -%}
          <i class="fa fa-code-fork"></i>&nbsp;
        {%- else -%}
          <i class="fa {{projecticon()}}"></i>&nbsp;
        {%- endif -%}
        {%- if parent.namespace -%}
          {{parent.namespace}}/
        {%- endif -%}
        {%- if parent.is_fork -%}
          {{ parent.user.user }}/
        {%- endif -%}
        {{parent.name}}
      </span>
      <div class="dropdown-menu" id="family-list">
          <div id="family-spinner py-3 text-center"><i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i></div>
      </div>
      </span>
      <span class="dropdown dropdown-btn">
      <a class="badge badge-secondary badge-pill border border-secondary dropdown-toggle pointer font-1em"
          data-toggle="dropdown">
        <span class="fa fa-random"></span>
        {{ branch_to }}
      </a>
      <div class="dropdown-menu">
          {% for branch in g.branches |reverse %}
          {% if branch != branch_to %}
          <a class="dropdown-item branch_to_item pointer" data-value="{{branch}}"><span class="fa fa-random"></span> {{ branch }}</a>
          {% endif %}
        {% endfor %}
      </div>
      </span>
    </div>
    {% if contributing %}
    <div id="contributing">
      {{ contributing | markdown | noJS | safe}}
    </div>
    {% endif %}


    <div class="mt-4">
      {{ form.title(class_="form-control", placeholder="Pull Request Title", required="required")|safe }}
      {% if form.title.errors %}
      <span class="float-right text-danger">
        <small>
        {% for error in form.title.errors %}
          {{ error }}&nbsp;
        {% endfor %}
        </small>
      </span>
      {% endif %}

      <div class="card mt-2">
        <div class="card-header pb-0 pt-1 bg-light">
          <div class="row">
            <div class="col align-self-center">
            </div>
            <div class="col d-flex">
               <ul class="nav nav-tabs ml-auto border-bottom-0">
                  <li class="nav-item">
                    <a class="nav-link pointer" id="previewinmarkdown" >Preview</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active pointer" id="editinmarkdown" >Edit</a>
                  </li>
                </ul>
              </div>
          </div>
        </div>
        <div class="card-body">
          <textarea class="form-control" rows=8 id="initial_comment" name="initial_comment"
            placeholder="Describe your changes" tabindex=1>
            {{- form.initial_comment.data if form.initial_comment.data else '' -}}
          </textarea>
          {% if form.initial_comment.errors %}
          <span class="float-right text-danger">
            <small>
            {% for error in form.initial_comment.errors %}
              {{ error }}&nbsp;
            {% endfor %}
            </small>
          </span>
          {% endif %}
          <div id="preview" class="p-1">
          </div>
          <div class="form-control">
            <label for="allow_rebase">Allow rebasing</label>
            <label class="c-input c-checkbox">
              <input checked id="allow_rebase" name="allow_rebase" type="checkbox" value="y">
            </label>
            <small class="text-muted">
              Let the maintainer of the target project to rebase the pull-request
            </small>
          </div>
        </div>
        <div class="card-footer bg-light">
          <div class="d-flex align-items-center">
            <small>Comments use <a href="https://docs.pagure.org/pagure/usage/markdown.html"
                target="_blank" rel="noopener noreferrer" class="notblue">Markdown Syntax</a></small>
            <div class="ml-auto">
              <div class="btn-group">
                  <input type="submit" class="btn btn-primary" value="Create Pull Request"{%
                    if not diff %} disabled title="There appear to be no diff, so nothing to request pulling"{% endif %}>

              </div>
            </div>
          </div>
        </div>
      </div>
      {{ form.csrf_token }}
    </div>


  </form>
</section>
{% endif %}

<ul class="nav nav-tabs nav-small my-4 border-bottom" role="tablist" id="pr-tabs">
  <li class="nav-item">
    <a class="nav-link {% if not pull_request %}active{%
        endif %}" data-toggle="tab" role="tab" href="#request_diff">
      <span>Files Changed&nbsp;</span>
      <span class="badge badge-secondary badge-pill">
        {{ diff|length if diff else 0}}
      </span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" role="tab" href="#commit_list">
      <span>Commits&nbsp;</span>
      <span class="badge badge-secondary badge-pill">
        {{ diff_commits|length }}
      </span>
    </a>
  </li>
</ul>

<div class="tab-content mb-5">

  <div class="tab-pane" role="tabpanel" id="commit_list">
    <div class="list-group">
        {% for commit in diff_commits %}
              {% set commit_link = url_for('ui_ns.view_commit',
                        repo=repo.name,
                        username=username,
                        namespace=repo.namespace,
                        commitid=commit.oid.hex) %}
              {% set tree_link = url_for(
                'ui_ns.view_tree', username=username, namespace=repo.namespace,
                repo=repo.name, identifier=commit.hex) %}

            <div class="list-group-item">
            <div class="row align-items-center">
              <div class="col">
                {% if commit_link %}
                  <a class="notblue" href="{{commit_link}}">
                {% endif %}
                <strong>{{ commit.message.strip().split('\n')[0] }}</strong>
                {% if commit_link %}
                  </a>
                {% endif %}
                <div>
                    {{commit.author|author2user_commits(
                      link=url_for('ui_ns.view_commits',
                          repo=repo.name,
                          branchname=branchname,
                          username=username,
                          namespace=repo.namespace,
                          author=commit.author.email),
                      cssclass="notblue")|safe}}
                      <span class="commitdate"
                      title="{{ commit.commit_time|format_ts }}"> &bull;
                    {{ commit.commit_time|humanize }}</span>&nbsp;&nbsp;
                </div>
              </div>
              <div class="col-xs-auto pr-3 text-right">
                  <div class="btn-group">
                    <a href="{{ commit_link }}"
                      class="btn btn-outline-primary font-weight-bold {{'disabled' if not commit_link}}">
                      <code>{{ commit.hex|short }}</code>
                    </a>
                    <a class="btn btn-outline-primary font-weight-bold {{'disabled' if not commit_link}}" href="{{tree_link}}"><span class="fa fa-file-code-o fa-fw"></span></a>
                  </div>
                </div>
          </div>
          </div>
        {% else %}
        <p class="error"> No commits found </p>
        {% endfor %}
      </div>
  </div>

  <div class="tab-pane {%
      if not pull_request %}active{%
      endif %}" role="tabpanel" id="request_diff">

      {{repo_renderdiff(diff=diff,
        diff_commits=diff_commits,
        pull_request=pull_request,
        repo=repo,
        username=username,
        namespace=namespace)}}

  </div>
</div> <!-- tab content-->

</div>

{# modal to change the target repo
<div class="modal fade" id="target_modal" tabindex="-1"
      role="dialog" aria-labelledby="Change target project" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Change Target Project</h4>
      </div>
      <div class="modal-body">
        <form action="{{ url_for(
            'ui_ns.new_request_pull',
            repo=repo.name,
            username=username,
            namespace=repo.namespace,
            branch_from=branch_from,
            branch_to=branch_to) }}" method="GET">
          <fieldset class="form-group" id="family_list">
            <div class="content-loading"></div>
          </fieldset>
          <button class="btn btn-primary" type="submit"
            title="Change the target project for this pull-request">
            Update
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
</div>#}
{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/jquery.textcomplete/jquery.textcomplete.min.js') }}?version={{ g.version}}"></script>
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/emojione/emojione.min.js') }}?version={{ g.version}}"></script>
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='emoji/emojicomplete.js') }}?version={{ g.version}}"></script>
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/selectize/selectize.min.js') }}?version={{ g.version}}"> </script>
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/jquery.caret/jquery.caret.min.js') }}?version={{ g.version}}"></script>
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/jquery.atwho/jquery.atwho.min.js') }}?version={{ g.version}}"></script>
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='request_ev.js') }}?version={{ g.version}}"></script>

<script type="text/javascript" nonce="{{ g.nonce }}">

function showTab(){
  $('#pr-tabs a[href="#request_diff"]').tab('show')
}


$(document).ready(function() {
  $('.inline_comment_link_btn').click(function() { showTab() });
  $('.delete_comment_btn').click(function() {
    return confirm('Do you really want to remove this comment?');
  });

  $('.branch_from_item').click(function(e){
    {% if remote_git and not (config.get('DISABLE_REMOTE_PR', True)) %}
      var _form = $("#new_remote_form");
      var final_url = "{{ url_for('ui_ns.new_remote_request_pull',
        repo=repo.name,
        username=username,
        namespace=repo.namespace,
        ) }}";
      _form.attr('action', final_url);
      var _branch_from = $(
        "#new_remote_form [name=branch_from]").val($(this).attr("data-value"));
      _form.submit();
    {% else %}
      var final_url = "{{ url_for('ui_ns.new_request_pull', username=username,
        namespace=repo.namespace, repo=repo.name,
        branch_from='--', branch_to=branch_to, project_to=project_to) }}";
        final_url = final_url.replace('--', $(this).attr("data-value"));
        window.location.href = final_url;
    {% endif %}
  });

  $('.branch_to_item').click(function(e){
    {% if remote_git and not (config.get('DISABLE_REMOTE_PR', True)) %}
      var _form = $("#new_remote_form");
      var final_url = "{{ url_for('ui_ns.new_remote_request_pull',
        repo=repo.name,
        username=username,
        namespace=repo.namespace,
        ) }}";
      _form.attr('action', final_url);
      var _branch_to = $(
        "#new_remote_form [name=branch_to]").val($(this).attr("data-value"));
      _form.submit();
    {% else %}
      var final_url = "{{ url_for('ui_ns.new_request_pull', username=username,
        namespace=repo.namespace, repo=repo.name,
        branch_from=branch_from, branch_to='--', project_to=project_to) }}";
       final_url = final_url.replace('--', $(this).attr("data-value"));
       window.location.href = final_url;
    {% endif %}
  });

{% if form %}
  $('#family-toggle').click( function (e) {
    $('#family-spinner').show();
    var _url = '{{ url_for(
            'internal_ns.get_project_family',
            repo=repo.name,
            username=username,
            namespace=repo.namespace) }}'
    $.ajax({
        url: _url,
        type: 'POST',
        dataType: 'json',
        data: {
          csrf_token: "{{ g.confirmationform.csrf_token.current_token }}",
          'allows_pr': '1',
        },
        success: function(res) {
          $('#family-spinner').hide();
          var _text = ''
          for (el in res.family) {
            var _t = '<a class="dropdown-item" href="'
            + '{{ url_for("ui_ns.new_request_pull",repo=repo.name, username=username, namespace=repo.namespace, branch_from=branch_from, branch_to=branch_to, project_to="---") }}">'
            + res.family[el]
            + '</a>';
            _t = _t.replace('---', res.family[el]);
            _text += _t;
          }
          var _el = $('#family-list');
          _el.html(_text);
        },
    });
  });

  $( "#preview" ).hide();

  $( "#previewinmarkdown" ).click(
    function(event, ui) {
        var _text = $( "#initial_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: "{{ g.confirmationform.csrf_token.current_token }}",
          },
          dataType: 'html',
          success: function(res) {
            var preview = emojione.toImage(res);
            $( "#preview" ).html(preview);
            $( "#previewinmarkdown" ).addClass("active");
            $( "#editinmarkdown" ).removeClass("active");
            $( "#initial_comment" ).hide();
            $( "#preview" ).show();
          },
          error: function(error) {
            alert('Unable to generate preview!'+error);
            console.log(error);
          }
        });
        return false;
    }
  );

  $( "#editinmarkdown" ).click(
    function(event, ui) {
      $( "#editinmarkdown" ).addClass("active");
      $( "#previewinmarkdown" ).removeClass("active");
      $( "#initial_comment" ).show();
      $( "#preview" ).hide();
    }
  );
{% endif %}

 });

</script>


{% endblock %}