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

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

<%block name="title">

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

</%block>

<%block 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>

</%block>

<%block name="css_extra">

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

</%block>

<%def name="breadcrumbs_links()">

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

</%def>

<%block name="header_menu">

    ${self.menu('gists')}

</%block>

<%def name="main()">

<div class="panel panel-primary">

    <div class="panel-heading clearfix">

        ${self.breadcrumbs()}

    </div>

    <div class="panel-body">

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

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

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="icon-cancel-circled"></i></button>

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

            </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>

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

                <textarea class="form-control"

                          id="description" name="description"

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

                <div>

                    <label>

                        ${_('Gist lifetime')}

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

                    </label>

                    <span class="text-muted">

                     %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="panel panel-default form-inline">

                    <div class="panel-heading">

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

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

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

                    </div>

                    <div class="panel-body no-padding">

                        <div id="editor_container">

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

                        </div>

                    </div>

                </div>

                ## dynamic edit box.

                <script type="text/javascript">

                    $(document).ready(function(){

                        var myCodeMirror = initCodeMirror(${h.js('editor_' + h.FID('f',file.path))}, ${h.jshtml(request.script_name)}, '');

                        //inject new modes

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

                        $mimetype_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).prop('selected', true);

                                    modes_select.options[0] = opt;

                                } else {

                                    modes_select.options[index++] = opt;

                                }

                            }

                        });

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

                        // on select change set new mode

                        $mimetype_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_input.val());

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

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

                        });

                        // on type the new filename set mode

                        $filename_input.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);

                                    $mimetype_select.val(detected_mode.mime);

                                }

                            }

                        });

                        // set mode on page load

## snippet for displaying default permission box

## usage:

##    <%namespace name="dpb" file="/base/default_perms_box.html"/>

##    ${dpb.default_perms_box(<url_to_form>)}

<%def name="default_perms_box(form_url)">

${h.form(form_url)}

    <div class="form">

            <div class="form-group">

                <label class="control-label" for="inherit_default_permissions">${_('Inherit defaults')}:</label>

                <div>

                    ${h.checkbox('inherit_default_permissions',value=True)}

                    <span class="help-block">

                        ${h.literal(_('Select to inherit global settings, IP whitelist and permissions from the %s.')

                    </span>

                </div>

            </div>

            <div id="inherit_overlay">

            <div class="form-group">

                <label class="control-label" for="create_repo_perm">${_('Create repositories')}:</label>

                <div>

                    ${h.checkbox('create_repo_perm',value=True)}

                    <span class="help-block">

                        ${_('Select this option to allow repository creation for this user')}

                    </span>

                </div>

            </div>

            <div class="form-group">

                <label class="control-label" for="create_user_group_perm">${_('Create user groups')}:</label>

                <div>

                    ${h.checkbox('create_user_group_perm',value=True)}

                    <span class="help-block">

                        ${_('Select this option to allow user group creation for this user')}

                    </span>

                </div>

            </div>

            <div class="form-group">

                <label class="control-label" for="fork_repo_perm">${_('Fork repositories')}:</label>

                <div>

                    ${h.checkbox('fork_repo_perm',value=True)}

                    <span class="help-block">

                        ${_('Select this option to allow repository forking for this user')}

                    </span>

                </div>

            </div>

            </div>

            <div class="form-group">

                <div class="buttons">

                    ${h.submit('save',_('Save'),class_="btn btn-default")}

                    ${h.reset('reset',_('Reset'),class_="btn btn-default")}

                </div>

            </div>

    </div>

${h.end_form()}

## JS

<script>

$(document).ready(function(e){

    var show_custom_perms = function(inherit_default){

        if(inherit_default){

            $('#inherit_overlay').hide();

        }else{

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

        }

    };

    show_custom_perms($('#inherit_default_permissions').prop('checked'));

    $('#inherit_default_permissions').change(function(){

        show_custom_perms($('#inherit_default_permissions').prop('checked'));

    });

});

</script>

</%def>