div.codeblock {

    overflow: auto;

    padding: 0px;

    border: 1px solid #ccc;

    background: #f8f8f8;

    font-size: 100%;

    line-height: 100%;

    /* new */

    line-height: 125%;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

}

div.codeblock .code-header {

    border-bottom: 1px solid #CCCCCC;

    background: #EEEEEE;

    padding: 10px 0 5px 0;

}

div.codeblock .code-header .stats {

    clear: both;

    padding: 2px 8px 2px 14px;

    border-bottom: 1px solid rgb(204, 204, 204);

    height: 23px;

    margin-bottom: 6px;

}

div.codeblock .code-header .stats .left {

    float: left;

}

div.codeblock .code-header .stats .left.img {

    margin-top: -2px;

}

div.codeblock .code-header .stats .left.item {

    float: left;

    padding: 0 9px 0 9px;

    border-right: 1px solid #ccc;

}

div.codeblock .code-header .stats .left.item pre {

}

div.codeblock .code-header .stats .left.item.last {

    border-right: none;

}

div.codeblock .code-header .stats .buttons {

    float: right;

    padding-right: 4px;

}

div.codeblock .code-header .author {

    margin-left: 15px;

    font-weight: bold;

    height: 25px;

}

div.codeblock .code-header .author .user {

    padding-top: 3px;

}

div.codeblock .code-header .commit {

    margin-left: 15px;

    font-weight: normal;

    white-space: pre;

}

.code-highlighttable,

div.codeblock .code-body table {

    width: 0 !important;

    border: 0px !important;

}

.code-highlighttable,

div.codeblock .code-body table td {

    border: 0px !important;

}

div.code-body {

    background-color: #FFFFFF;

}

div.codeblock .code-header .search-path {

    padding: 0px 0px 0px 10px;

}

div.search-code-body {

    background-color: #FFFFFF;

    padding: 5px 0px 5px 10px;

}

div.search-code-body pre .match {

    background-color: #FAFFA6;

}

div.search-code-body pre .break {

    background-color: #DDE7EF;

    width: 100%;

    color: #747474;

    display: block;

}

div.annotatediv {

    margin-left: 2px;

    margin-right: 4px;

}

.code-highlight {

    padding: 0px;

    margin-top: 5px;

    margin-bottom: 5px;

    border-left: 1px solid #ccc;

}

.code-highlight pre, .linenodiv pre {

    padding: 5px 2px 0px 5px;

    margin: 0;

}

.code-highlight pre div:target {

    background-color: #FFFFBE !important;

}

.linenos { padding: 0px !important; border:0px !important;}

.linenos a { text-decoration: none; }

.code { display: block; border:0px !important; }

.code-highlight .hll, .codehilite .hll { background-color: #ffffcc }

.code-highlight .c, .codehilite .c { color: #408080; font-style: italic } /* Comment */

.code-highlight .err, .codehilite .err { border: 1px solid #FF0000 } /* Error */

.code-highlight .k, .codehilite .k { color: #008000; font-weight: bold } /* Keyword */

.code-highlight .o, .codehilite .o { color: #666666 } /* Operator */

.code-highlight .cm, .codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */

.code-highlight .cp, .codehilite .cp { color: #BC7A00 } /* Comment.Preproc */

.code-highlight .c1, .codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */

.code-highlight .cs, .codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */

.code-highlight .gd, .codehilite .gd { color: #A00000 } /* Generic.Deleted */

.code-highlight .ge, .codehilite .ge { font-style: italic } /* Generic.Emph */

.code-highlight .gr, .codehilite .gr { color: #FF0000 } /* Generic.Error */

.code-highlight .gh, .codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */

.code-highlight .gi, .codehilite .gi { color: #00A000 } /* Generic.Inserted */

.code-highlight .go, .codehilite .go { color: #808080 } /* Generic.Output */

.code-highlight .gp, .codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */

.code-highlight .gs, .codehilite .gs { font-weight: bold } /* Generic.Strong */

.code-highlight .gu, .codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */

.code-highlight .gt, .codehilite .gt { color: #0040D0 } /* Generic.Traceback */

.code-highlight .kc, .codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */

.code-highlight .kd, .codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */

.code-highlight .kn, .codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */

.code-highlight .kp, .codehilite .kp { color: #008000 } /* Keyword.Pseudo */

.code-highlight .kr, .codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */

.code-highlight .kt, .codehilite .kt { color: #B00040 } /* Keyword.Type */

.code-highlight .m, .codehilite .m { color: #666666 } /* Literal.Number */

.code-highlight .s, .codehilite .s { color: #BA2121 } /* Literal.String */

.code-highlight .na, .codehilite .na { color: #7D9029 } /* Name.Attribute */

.code-highlight .nb, .codehilite .nb { color: #008000 } /* Name.Builtin */

.code-highlight .nc, .codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */

.code-highlight .no, .codehilite .no { color: #880000 } /* Name.Constant */

.code-highlight .nd, .codehilite .nd { color: #AA22FF } /* Name.Decorator */

.code-highlight .ni, .codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */

.code-highlight .ne, .codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */

.code-highlight .nf, .codehilite .nf { color: #0000FF } /* Name.Function */

.code-highlight .nl, .codehilite .nl { color: #A0A000 } /* Name.Label */

.code-highlight .nn, .codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */

.code-highlight .nt, .codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */

.code-highlight .nv, .codehilite .nv { color: #19177C } /* Name.Variable */

.code-highlight .ow, .codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */

.code-highlight .w, .codehilite .w { color: #bbbbbb } /* Text.Whitespace */

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

<%block name="title">

    ${_('%s File Edit') % c.repo_name}

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

<%block name="header_menu">

    ${self.menu('repositories')}

</%block>

<%def name="breadcrumbs_links()">

    ${_('Edit file')} @ ${h.show_id(c.cs)}

</%def>

<%def name="main()">

${self.repo_context_bar('files')}

<div class="panel panel-primary">

    <div class="panel-heading clearfix">

        <div class="pull-left">

            ${self.breadcrumbs()}

        </div>

        <div class="pull-right">

            <a href="#">${_('Branch')}: ${c.cs.branch}</a>

        </div>

    </div>

    <div class="panel-body" id="edit">

        <div id="files_data">

            <h3 class="files_location">${_('Location')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.file.path)}</h3>

            ${h.form(h.url.current(),method='post',id='eform',class_='form-inline')}

            <div id="body" class="codeblock">

            <div class="code-header">

                    <div class="left"><i class="icon-doc-inv"></i></div>

                    <div class="left item">${h.link_to(h.show_id(c.file.changeset),h.url('changeset_home',repo_name=c.repo_name,revision=c.file.changeset.raw_id))}</div>

                    <div class="left item">${h.format_byte_size(c.file.size,binary=True)}</div>

                    <div class="left item last">${c.file.mimetype}</div>

                    <div class="pull-right buttons">

                      ${h.link_to(_('Show Annotation'),h.url('files_annotate_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

                      ${h.link_to(_('Show as Raw'),h.url('files_raw_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

                      ${h.link_to(_('Download as Raw'),h.url('files_rawfile_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

                      % if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):

                       % if not c.file.is_binary:

                        ${h.link_to(_('Source'),h.url('files_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

                       % endif

                      % endif

                    </div>

                </div>

                    ${_('Editing file')}: ${c.file.unicode_path}

                    <select class="form-control" id="mimetype" name="mimetype"></select>

                </label>

            </div>

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

                <textarea id="editor" name="content" style="display:none">${h.escape(c.file.content)|n}</textarea>

                <div class="text-muted" style="padding: 10px">${_('Commit Message')}</div>

                <textarea class="form-control" id="commit" name="message" style="height: 60px;width: 99%;margin-left:4px" placeholder="${c.default_message}"></textarea>

            </div>

            <div style="text-align: left;padding-top: 5px">

            ${h.submit('commit',_('Commit Changes'),class_="btn btn-success")}

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

            </div>

            ${h.end_form()}

        </div>

    </div>

</div>

<script type="text/javascript">

    $(document).ready(function(){

        var reset_url = "${h.url('files_home',repo_name=c.repo_name,revision=c.cs.raw_id,f_path=c.file.path)}";

        var myCodeMirror = initCodeMirror('editor', "${request.script_name}", reset_url);

       //inject new modes, based on codeMirrors modeInfo object

        var $mimetype_select = $('#mimetype');

        $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;

                }

            }

        });

        // try to detect the mode based on the file we edit

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

        if(detected_mode){

            setCodeMirrorMode(myCodeMirror, detected_mode);

            $($mimetype_select.find('option[value="'+detected_mode.mime+'"]')[0]).prop('selected', true);

        }

        $mimetype_select.on('change', function(e){

            var selected = e.currentTarget;

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

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

            setCodeMirrorMode(myCodeMirror, detected_mode);

        });

    });

</script>

</%def>

<div id="node_history" style="padding: 0px 0px 10px 0px">

    <div>

        <div class="pull-left">

        ${h.form(h.url('files_diff_home',repo_name=c.repo_name,f_path=c.f_path),method='get')}

        ${h.hidden('diff2',c.changeset.raw_id)}

        ${h.hidden('diff1')}

        ${h.submit('diff',_('Diff to Revision'),class_="btn btn-default btn-sm")}

        ${h.submit('show_rev',_('Show at Revision'),class_="btn btn-default btn-sm")}

        ${h.hidden('annotate', c.annotate)}

        ${h.link_to(_('Show Full History'),h.url('changelog_file_home',repo_name=c.repo_name, revision=c.changeset.raw_id, f_path=c.f_path),class_="btn btn-default btn-sm")}

        ${h.link_to(_('Show Authors'),'#',class_="btn btn-default btn-sm" ,id="show_authors")}

        ${h.end_form()}

        </div>

        <div id="file_authors" class="file_author" style="clear:both; display: none"></div>

    </div>

    <div style="clear:both"></div>

</div>

<div id="body" class="codeblock">

    <div class="code-header">

            <div class="left img"><i class="icon-doc-inv"></i></div>

            <div class="left item"><pre data-toggle="tooltip" title="${h.fmt_date(c.changeset.date)}">${h.link_to(h.show_id(c.changeset),h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</pre></div>

            <div class="left item"><pre>${h.format_byte_size(c.file.size,binary=True)}</pre></div>

            <div class="left item last"><pre>${c.file.mimetype}</pre></div>

        </div>

        <div class="pull-right buttons">

              %if c.annotate:

                ${h.link_to(_('Show Source'),    h.url('files_home',         repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

              %else:

                ${h.link_to(_('Show Annotation'),h.url('files_annotate_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

              %endif

              ${h.link_to(_('Show as Raw'),h.url('files_raw_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

              ${h.link_to(_('Download as Raw'),h.url('files_rawfile_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path),class_="btn btn-default btn-xs")}

              %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):

               %if c.on_branch_head and not c.file.is_binary:

                ${h.link_to(_('Edit on Branch: %s') % c.changeset.branch, h.url('files_edit_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path, anchor='edit'),class_="btn btn-default btn-xs")}

                ${h.link_to(_('Delete'), h.url('files_delete_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path, anchor='edit'),class_="btn btn-danger btn-xs")}

               %elif c.on_branch_head and c.file.is_binary:

                ${h.link_to(_('Edit'), '#', class_="btn btn-default btn-xs disabled tooltip", title=_('Editing binary files not allowed'))}

                ${h.link_to(_('Delete'), h.url('files_delete_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path, anchor='edit'),class_="btn btn-danger btn-xs")}

               %else:

                ${h.link_to(_('Edit'), '#', class_="btn btn-default btn-xs disabled tooltip", title=_('Editing files allowed only when on branch head revision'))}

                ${h.link_to(_('Delete'), '#', class_="btn btn-danger btn-xs disabled tooltip", title=_('Deleting files allowed only when on branch head revision'))}

               %endif

              %endif

        </div>

        <div class="author">

            ${h.gravatar_div(h.email_or_none(c.changeset.author), size=16)}

            <div title="${c.changeset.author}" class="user">${h.person(c.changeset.author)}</div>

        </div>

        <div class="commit">${h.urlify_text(c.changeset.message,c.repo_name)}</div>

    </div>

    <div class="code-body">

      %if c.file.is_browser_compatible_image():

        <img src="${h.url('files_raw_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path)}" class="img-preview"/>

      %elif c.file.is_binary:

        <div style="padding:5px">

          ${_('Binary file (%s)') % c.file.mimetype}

        </div>

      %else:

        %if c.file.size < c.cut_off_limit or c.fulldiff:

            %if c.annotate:

              ${h.pygmentize_annotation(c.repo_name,c.file,linenos=True,anchorlinenos=True,lineanchors='L',cssclass="code-highlight")}

            %else:

              ${h.pygmentize(c.file,linenos=True,anchorlinenos=True,lineanchors='L',cssclass="code-highlight")}

            %endif

        %else:

            <h4>

            ${_('File is too big to display.')}

            %if c.annotate:

              ${h.link_to(_('Show full annotation anyway.'), h.url.current(fulldiff=1, **request.GET.mixed()))}

            %else:

              ${h.link_to(_('Show as raw.'), h.url('files_raw_home',repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.f_path))}

            %endif

            </h4>

        %endif

      %endif

    </div>

</div>

<script>

    $(document).ready(function(){

        // fake html5 history state

        var _State = {

           url: "${h.url.current()}",

           data: {

             node_list_url: node_list_url.replace('__REV__',"${c.changeset.raw_id}").replace('__FPATH__', "${h.safe_unicode(c.file.path)}"),

             url_base: url_base.replace('__REV__',"${c.changeset.raw_id}"),

             rev:"${c.changeset.raw_id}",

             f_path: "${h.safe_unicode(c.file.path)}"

           }

        }

        callbacks(_State); // defined in files.html, main callbacks. Triggered in pjax calls

    });

</script>