<%inherit file="/base/base.html"/>

<%block name="title">
    ${c.repo_name} ${_('New Pull Request')}
</%block>

<%def name="breadcrumbs_links()">
    ${_('New Pull Request')}
</%def>

<%block name="header_menu">
    ${self.menu('repositories')}
</%block>

<%def name="main()">
${self.repo_context_bar('showpullrequest')}
<div class="panel panel-primary">
    <div class="panel-heading clearfix">
        ${self.breadcrumbs()}
    </div>

    ${h.form(url('pullrequest', repo_name=c.repo_name), method='post', id='pull_request_form')}
    <div class="form panel-body">
        <div class="settings clearfix">
            <div class="form-group">
                <label class="control-label" for="pullrequest_title">${_('Title')}:</label>
                <div>
                    ${h.text('pullrequest_title',class_='form-control',placeholder=_('Summarize the changes - or leave empty'))}
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="pullrequest_desc">${_('Description')}:</label>
                <div>
                    ${h.textarea('pullrequest_desc',class_='form-control',placeholder=_('Write a short description on this pull request'))}
                </div>
            </div>

            <div class="form-group">
                <label class="control-label">${_('Changeset flow')}:</label>
                <div class="clearfix">
                    ##ORG
                    <div>
                        <div>
                            <div>
                            <b>${_('Origin repository')}:</b> <span id="org_repo_desc">${c.db_repo.description.split('\n')[0]}</span>
                            </div>
                            <div>
                            ${h.select('org_repo','',c.cs_repos,class_='refs')}:${h.select('org_ref',c.default_cs_ref,c.cs_refs,class_='refs')}
                            </div>
                            <div>
                            <b>${_('Revision')}:</b> <span id="org_rev_span">-</span>
                            </div>
                        </div>
                    </div>

                    ##OTHER, most Probably the PARENT OF THIS FORK
                    <div>
                        <div>
                            ## filled with JS
                            <div>
                            <b>${_('Destination repository')}:</b> <span id="other_repo_desc">${c.a_repo.description.split('\n')[0]}</span>
                            </div>
                            <div>
                            ${h.select('other_repo',c.a_repo.repo_name,c.a_repos,class_='refs')}:${h.select('other_ref',c.default_a_ref,c.a_refs,class_='refs')}
                            </div>
                            <div>
                            <b>${_('Revision')}:</b> <span id="other_rev_span">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="buttons">
                    ${h.submit('save',_('Create Pull Request'),class_="btn btn-default")}
                    ${h.reset('reset',_('Reset'),class_="btn btn-default")}
                </div>
            </div>
        </div>

        <div>
           <h4>${_('Changesets')}</h4>
           ## overview pulled by ajax
           <div id="pull_request_overview"></div>
        </div>
    </div>

    ${h.end_form()}

</div>

<script src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>
<script>'use strict';
  pyroutes.register('pullrequest_repo_info', ${h.js(url('pullrequest_repo_info',repo_name='%(repo_name)s'))}, ['repo_name']);

  var pendingajax = undefined;
  function otherrepoChanged(){
      var $other_ref = $('#other_ref');
      $other_ref.prop('disabled', true);
      var repo_name = $('#other_repo').val();
      if (pendingajax) {
          pendingajax.abort();
          pendingajax = undefined;
      }
      pendingajax = ajaxGET(pyroutes.url('pullrequest_repo_info', {"repo_name": repo_name}),
          function(data){
              pendingajax = undefined;
              $('#other_repo_desc').html(data.description);

              // replace options of other_ref with the ones for the current other_repo
              $other_ref.empty();
              for(var i = 0; i < data.refs.length; i++)
              {
                var $optgroup = $('<optgroup/>').prop('label', data.refs[i][1]);
                var options = data.refs[i][0];
                var length = options.length;
                for(var j = 0; j < length; j++)
                {
                  $optgroup.append($('<'+'option/>').text(options[j][1]).val(options[j][0]));
                }
                $other_ref.append($optgroup);
              }
              $other_ref.val(data.selected_ref);

              // re-populate the select2 thingy
              $("#other_ref").select2({
                  dropdownAutoWidth: true
              });

              $other_ref.prop('disabled', false);
              loadPreview();
          });
  }

  function loadPreview(){
      //url template
      var url = ${h.js(h.url('compare_url',
                         repo_name='__other_repo__',
                         org_ref_type='rev',
                         org_ref_name='__other_ref_name__',
                         other_repo='__org_repo__',
                         other_ref_type='rev',
                         other_ref_name='__org_ref_name__',
                         is_ajax_preview=True,
                         merge=True,
                         ))};
      var org_repo = $('#pull_request_form #org_repo').val();
      var org_ref = $('#pull_request_form #org_ref').val().split(':');
      ## TODO: make nice link like link_to_ref() do
      $('#org_rev_span').html(org_ref[2].substr(0,12));

      var other_repo = $('#pull_request_form #other_repo').val();
      var other_ref = $('#pull_request_form #other_ref').val().split(':');
      $('#other_rev_span').html(other_ref[2].substr(0,12));

      var rev_data = {
          '__org_repo__': org_repo,
          '__org_ref_name__': org_ref[2],
          '__other_repo__': other_repo,
          '__other_ref_name__': other_ref[2]
      }; // gather the org/other ref and repo here

      for (let k in rev_data){
          url = url.replace(k,rev_data[k]);
      }

      if (pendingajax) {
          pendingajax.abort();
          pendingajax = undefined;
      }
      pendingajax = asynchtml(url, $('#pull_request_overview'), function(){
          pendingajax = undefined;
      });
  }

  $(document).ready(function(){
      $("#org_repo").select2({
          dropdownAutoWidth: true
      });
      ## (org_repo can't change)

      $("#org_ref").select2({
          dropdownAutoWidth: true,
          maxResults: 50,
          sortResults: branchSort
      });
      $("#org_ref").on("change", function(){
          loadPreview();
      });

      $("#other_repo").select2({
          dropdownAutoWidth: true
      });
      $("#other_repo").on("change", function(){
          otherrepoChanged();
      });

      $("#other_ref").select2({
          dropdownAutoWidth: true,
          maxResults: 50,
          sortResults: branchSort
      });
      $("#other_ref").on("change", function(){
          loadPreview();
      });

      //lazy load overview after 0.5s
      setTimeout(loadPreview, 500);
  });

</script>

</%def>