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;

}

<%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);

        }

<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

    });