## -*- coding: utf-8 -*-

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

<%def name="title()">

    ${_('Edit Gist')} · ${c.gist.gist_access_id}

    %if c.site_name:

        · ${c.site_name}

    %endif

</%def>

<%def name="js_extra()">

<script type="text/javascript" src="${h.url('/codemirror/lib/codemirror.js')}"></script>

<script type="text/javascript" src="${h.url('/js/codemirror_loadmode.js')}"></script>

<script type="text/javascript" src="${h.url('/codemirror/mode/meta.js')}"></script>

</%def>

<%def name="css_extra()">

<link rel="stylesheet" type="text/css" href="${h.url('/codemirror/lib/codemirror.css')}"/>

</%def>

<%def name="breadcrumbs_links()">

    ${_('Edit Gist')} · ${c.gist.gist_access_id}

</%def>

<%def name="page_nav()">

    ${self.menu('gists')}

</%def>

<%def name="main()">

<div class="box">

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}

    </div>

    <div class="table">

        <div id="edit_error" style="display: none" class="flash_msg">

            <div class="alert alert-dismissable alert-warning">

              ${h.literal(_('Gist was update since you started editing. Copy your changes and click %(here)s to reload new version.')

                             % {'here': h.link_to('here',h.url('edit_gist', gist_id=c.gist.gist_access_id))})}

            </div>

            <script>

            if (typeof jQuery != 'undefined') {

                $(".alert").alert();

            }

            </script>

        </div>

        <div id="files_data">

          ${h.form(h.url('edit_gist', gist_id=c.gist.gist_access_id), method='post', id='eform')}

            <div>

                <div class="gravatar">

                   <img alt="gravatar" src="${h.gravatar_url(h.email_or_none(c.authuser.full_contact),32)}"/>

                </div>

                <input type="hidden" value="${c.file_changeset.raw_id}" name="parent_hash">

                <textarea style="resize:vertical; width:400px;border: 1px solid #ccc;border-radius: 3px;"

                          id="description" name="description"

                          placeholder="${_('Gist description ...')}">${c.gist.gist_description}</textarea>

                <div style="padding:0px 0px 0px 42px">

                    <label for='lifetime'>${_('Gist lifetime')}</label>

                    ${h.select('lifetime', '0', c.lifetime_options)}

                    <span class="" style="color: #AAA">

                     %if c.gist.gist_expires == -1:

                      ${_('Expires')}: ${_('never')}

                     %else:

                      ${_('Expires')}: ${h.age(h.time_to_datetime(c.gist.gist_expires))}

                     %endif

                   </span>

                </div>

            </div>

            % for cnt, file in enumerate(c.files):

                <div id="body" class="codeblock" style="margin-bottom: 4px">

                    <div style="padding: 10px 10px 10px 26px;color:#666666">

                        <input type="hidden" value="${file.path}" name="org_files">

                        <input id="filename_${h.FID('f',file.path)}" name="files" size="30" type="text" value="${file.path}">

                        <select id="mimetype_${h.FID('f',file.path)}" name="mimetypes"/>

                    </div>

                    <div class="editor_container">

                        <pre id="editor_pre"></pre>

                        <textarea id="editor_${h.FID('f',file.path)}" name="contents" style="display:none">${file.content}</textarea>

                    </div>

                </div>

                ## dynamic edit box.

                <script type="text/javascript">

                var myCodeMirror = initCodeMirror("editor_${h.FID('f',file.path)}", '');

                //inject new modes

                var $modes_select = $('#mimetype_${h.FID('f',file.path)}');

                $modes_select.each(function(){

                    var modes_select = this;

                    var index = 1;

                    for(var i=0;i<CodeMirror.modeInfo.length;i++) {

                        var m = CodeMirror.modeInfo[i];

                        var opt = new Option(m.name, m.mime);

                        $(opt).attr('mode', m.mode);

                        if (m.mime == 'text/plain') {

                            // default plain text

                            $(opt).attr('selected', 'selected');

                            modes_select.options[0] = opt;

                        } else {

                            modes_select.options[index++] = opt;

                        }

                    }

                });

                var $filename = $('#filename_${h.FID('f',file.path)}');

                // on select change set new mode

                $modes_select.change(function(e){

                    var selected = e.currentTarget;

                    var node = selected.options[selected.selectedIndex];

                    var detected_mode = CodeMirror.findModeByMIME(node.value);

                    setCodeMirrorMode(myCodeMirror, detected_mode);

                    var proposed_ext = CodeMirror.findExtensionByMode(detected_mode);

                    var file_data = CodeMirror.getFilenameAndExt($filename.val());

                    var filename = file_data['filename'] || 'filename1';

                    $filename.val(filename + '.' + proposed_ext);

                });

                // on type the new filename set mode

                $filename.keyup(function(e){

                    var file_data = CodeMirror.getFilenameAndExt(this.value);

                    if(file_data['ext'] != null){

                        var detected_mode = CodeMirror.findModeByExtension(file_data['ext']) || CodeMirror.findModeByMIME('text/plain');

                        if (detected_mode){

                            setCodeMirrorMode(myCodeMirror, detected_mode);

                            $modes_select.val(detected_mode.mime);

                        }

                    }

                });

                // set mode on page load

                var detected_mode = CodeMirror.findModeByExtension("${file.extension}");

                if (detected_mode){

                    setCodeMirrorMode(myCodeMirror, detected_mode);

                    $modes_select.val(detected_mode.mime);

                }

                </script>

            %endfor

            <div style="padding-top: 5px">

            ${h.submit('update',_('Update Gist'),class_="btn btn-mini btn-success")}

            <a class="btn btn-mini" href="${h.url('gist', gist_id=c.gist.gist_access_id)}">${_('Cancel')}</a>

            </div>

          ${h.end_form()}

          <script>

              $('#update').on('click', function(e){

                  e.preventDefault();

                  // check for newer version.

                  $.ajax({

                    url: "${h.url('edit_gist_check_revision', gist_id=c.gist.gist_access_id)}",

                    data: {'revision': '${c.file_changeset.raw_id}'},

                    dataType: 'json',

                    type: 'POST',

                    success: function(data) {

                      if(data.success == false){

                          $('#edit_error').show();

                      }

                      else{

                        $('#eform').submit();

                      }

                    }

                  })

              });

          </script>

        </div>

    </div>

</div>

</%def>

                            ${h.submit('sign_in',_('Log In'),class_="btn btn-mini")}

                        </div>

                    </div>

                </div>

            </div>

            ${h.end_form()}

          %else:

            <div class="links_left">

                <div class="big_gravatar"><img alt="gravatar" src="${h.gravatar_url(c.authuser.email,48)}" /></div>

                <div class="full_name">${c.authuser.full_name_or_username}</div>

                <div class="email">${c.authuser.email}</div>

            </div>

            <div class="links_right">

            <ol class="links">

              <li><a href="${h.url('notifications')}">${_('Notifications')}: ${c.unread_notifications}</a></li>

              <li>${h.link_to(_(u'My Account'),h.url('my_account'))}</li>

              <li class="logout">${h.link_to(_(u'Log Out'),h.url('logout_home'))}</li>

            </ol>

            </div>

          %endif

        </div>

      </div>

    </li>

    <script type="text/javascript">

        var visual_show_public_icon = "${c.visual.show_public_icon}" == "True";

        var cache = {}

        /*format the look of items in the list*/

        var format = function(state){

            if (!state.id){

              return state.text; // optgroup

            }

            var obj_dict = state.obj;

            var tmpl = '';

            if(obj_dict && state.type == 'repo'){

                tmpl += '<span class="repo-icons">';

                if(obj_dict['repo_type'] === 'hg'){

                    tmpl += '<i class="icon-hg"></i> ';

                }

                else if(obj_dict['repo_type'] === 'git'){

                    tmpl += '<i class="icon-git"></i> ';

                }

                if(obj_dict['private']){

                    tmpl += '<i class="icon-keyhole-circled"></i> ';

                }

                else if(visual_show_public_icon){

                    tmpl += '<i class="icon-globe"></i> ';

                }

                tmpl += '</span>';

            }

            if(obj_dict && state.type == 'group'){

                    tmpl += '<i class="icon-folder"></i> ';

            }

            tmpl += state.text;

            return tmpl;

        }

        $("#repo_switcher").select2({

            placeholder: '<i class="icon-database"></i> ${_('Repositories')}',

            dropdownAutoWidth: true,

            formatResult: format,

            formatSelection: format,

            formatNoMatches: function(term){

                return "${_('No matches found')}";

            },

            containerCssClass: "repo-switcher",

            dropdownCssClass: "repo-switcher-dropdown",

            escapeMarkup: function(m){

                // don't escape our custom placeholder

                if(m.substr(0,29) == '<i class="icon-database"></i>'){

                    return m;

                }

                return Select2.util.escapeMarkup(m);

            },

            query: function(query){

              var key = 'cache';

              var cached = cache[key] ;

              if(cached) {

                var data = {results: []};

                //filter results

                $.each(cached.results, function(){

                    var section = this.text;

                    var children = [];

                    $.each(this.children, function(){

                        if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){

                            children.push({'id': this.id, 'text': this.text, 'type': this.type, 'obj': this.obj})

                        }

                    })

                    if(children.length !== 0){

                        data.results.push({'text': section, 'children': children})

                    }

                });

                query.callback(data);

              }else{

                  $.ajax({

                    url: "${h.url('repo_switcher_data')}",

                    data: {},

                    dataType: 'json',

                    type: 'GET',

                    success: function(data) {

                      cache[key] = data;

                      query.callback({results: data.results});

                    }

                  })

              }

            }

        });

        $("#repo_switcher").on('select2-selecting', function(e){

            e.preventDefault();

            window.location = pyroutes.url('summary_home', {'repo_name': e.val})

        })

        ## Global mouse bindings ##

        // general help "?"

        Mousetrap.bind(['?'], function(e) {

            $('#help_kb').modal({})

        });

        // / open the quick filter

        Mousetrap.bind(['/'], function(e) {

            $("#repo_switcher").select2("open");

            // return false to prevent default browser behavior

            // and stop event from bubbling

            return false;

        });

        // ctrl/command+b, show the the main bar

        Mousetrap.bind(['command+b', 'ctrl+b'], function(e) {

            if($('#header-inner').hasClass('hover') && $('#content').hasClass('hover')){

                $('#header-inner').removeClass('hover');

                $('#content').removeClass('hover');

            }

            else{

                $('#header-inner').addClass('hover');

                $('#content').addClass('hover');

            }

            return false;

        });

        // general nav g + action

        Mousetrap.bind(['g h'], function(e) {

            window.location = pyroutes.url('home');

        });

        Mousetrap.bind(['g g'], function(e) {

            window.location = pyroutes.url('gists', {'private':1});

        });

        Mousetrap.bind(['g G'], function(e) {

            window.location = pyroutes.url('gists', {'public':1});

        });

        Mousetrap.bind(['n g'], function(e) {

            window.location = pyroutes.url('new_gist');

        });

        Mousetrap.bind(['n r'], function(e) {

            window.location = pyroutes.url('new_repo');

        });

        % if hasattr(c, 'repo_name') and hasattr(c, 'db_repo'):

            // nav in repo context

            Mousetrap.bind(['g s'], function(e) {

                window.location = pyroutes.url('summary_home', {'repo_name': REPO_NAME});

            });

            Mousetrap.bind(['g c'], function(e) {

                window.location = pyroutes.url('changelog_home', {'repo_name': REPO_NAME});

            });

            Mousetrap.bind(['g F'], function(e) {

                window.location = pyroutes.url('files_home', {'repo_name': REPO_NAME, 'revision': '${c.db_repo.landing_rev[1]}', 'f_path': '', 'search': '1'});

            });

            Mousetrap.bind(['g f'], function(e) {

                window.location = pyroutes.url('files_home', {'repo_name': REPO_NAME, 'revision': '${c.db_repo.landing_rev[1]}', 'f_path': ''});

            });

            Mousetrap.bind(['g o'], function(e) {

                window.location = pyroutes.url('edit_repo', {'repo_name': REPO_NAME});

            });

            Mousetrap.bind(['g O'], function(e) {

                window.location = pyroutes.url('edit_repo_perms', {'repo_name': REPO_NAME});

            });

        % endif

    </script>

</%def>

%if 0:

<div class="modal" id="help_kb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <h4 class="modal-title">${_('Keyboard shortcuts')}</h4>

        </div>

        <div class="modal-body">

           <div class="row">

              <div class="col-md-5">

                <table class="keyboard-mappings">

                    <tbody>

                  <tr>

                    <th></th>

                    <th>${_('Site-wide shortcuts')}</th>

                  </tr>

                  <%

                     elems = [

                         ('/', 'Open quick search box'),

                         ('ctrl/cmd+b', 'Show main settings bar'),

                         ('g h', 'Goto home page'),

                         ('g g', 'Goto my private gists page'),

                         ('g G', 'Goto my public gists page'),

                         ('n r', 'New repository page'),

                         ('n g', 'New gist page')

                     ]

                  %>

                  %for key, desc in elems:

                  <tr>

                    <td class="keys">

                      <span class="key">${key}</span>

                    </td>

                    <td>${desc}</td>

                  </tr>

                %endfor

                </tbody>

                  </table>

              </div>

              <div class="col-md-offset-5">

                <table class="keyboard-mappings">

                <tbody>

                  <tr>

                    <th></th>

                    <th>${_('Repositories')}</th>

                  </tr>

                  <%

                     elems = [

                         ('g s', 'Goto summary page'),

                         ('g c', 'Goto changelog page'),

                         ('g f', 'Goto files page'),

                         ('g F', 'Goto files page with file search activated'),

                         ('g o', 'Goto repository settings'),

                         ('g O', 'Goto repository permissions settings')

                     ]

                  %>

                  %for key, desc in elems:

                  <tr>

                    <td class="keys">

                      <span class="key">${key}</span>

                    </td>

                    <td>${desc}</td>

                  </tr>

                %endfor

                </tbody>

            </table>

              </div>

            </div>

        </div>

        <div class="modal-footer">

        </div>

      </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

%endif

<div class="flash_msg">

    <% messages = h.flash.pop_messages() %>

    % if messages:

        % for message in messages:

            <div class="alert alert-dismissable alert-${message.category}">

              ${message}

            </div>

        % endfor

    % endif

    <script>

    if (typeof jQuery != 'undefined') {

        $(".alert").alert();

    }

    </script>

</div>