font-size: 12px;

    font-weight: 700;

    min-height: 14px;

    line-height: 14px;

    margin-bottom: 10px;

    margin-top: 0;

    display: block;

    overflow: auto;

    padding: 6px 10px 6px 10px;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

    position: relative;

    color: #FFF;

    border-width: 1px;

    border-style: solid;

    border-radius: 4px;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);

}

div#legend_data {

    padding-left: 10px;

}

div#legend_container table {

    border: none !important;

}

div#legend_container table,

div#legend_choices table {

    width: auto !important;

}

table#permissions_manage {

    width: 0 !important;

}

table#permissions_manage span.private_repo_msg {

    font-size: 0.8em;

    opacity: 0.6;

}

table#permissions_manage td.private_repo_msg {

    font-size: 0.8em;

}

table#permissions_manage tr#add_perm_input td {

    vertical-align: middle;

}

div.gravatar {

    background-color: #FFF;

    float: left;

    margin-right: 0.7em;

    padding: 1px 1px 1px 1px;

    line-height: 0;

    border-radius: 3px;

}

div.gravatar img {

    border-radius: 2px;

}

#header, #content, #footer {

    min-width: 978px;

}

#content {

    clear: both;

    padding: 10px 10px 14px 10px;

}

#content.hover {

    padding: 55px 10px 14px 10px !important;

}

#content div.panel div.panel-heading div.search {

    border-left: 1px solid #576622;

}

#content div.panel div.panel-heading div.search div.input input {

    border: 1px solid #576622;

}

.btn {

    color: #515151;

    background-color: #DADADA;

    background-repeat: repeat-x;

    background-image: linear-gradient(to bottom, #F4F4F4, #DADADA);

    border-top: 1px solid #DDD;

    border-left: 1px solid #c6c6c6;

    border-right: 1px solid #DDD;

    border-bottom: 1px solid #c6c6c6;

    outline: none;

    margin: 0px 3px 3px 0px;

    border-radius: 4px 4px 4px 4px !important;

    cursor: pointer !important;

    padding: 3px 3px 3px 3px;

    display: inline-block;

}

ul.nav-stacked {

    margin: 20px;

    color: #393939;

    font-weight: 700;

}

ul.nav-stacked a {

    color: inherit;

}

ul.nav-stacked li.active {

    list-style-type: disc

}

/* make .btn inputs and buttons and divs look the same */

button.btn,

input.btn {

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

}

.btn::-moz-focus-inner {

    border: 0;

    padding: 0;

}

.btn.badge {

    cursor: default !important;

}

input[disabled].btn,

.btn.disabled {

    color: #999;

}

.btn.btn-sm {

}

.btn.btn-xs {

}

.btn:focus {

    outline: none;

}

.btn:hover {

    text-decoration: none;

    color: #515151;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF !important;

}

.btn.badge:hover {

    box-shadow: none !important;

}

.btn.disabled:hover {

    background-position: 0;

    color: #999;

    text-decoration: none;

    box-shadow: none !important;

}

.btn.red {

    color: #fff;

    background-color: #c43c35;

    background-repeat: repeat-x;

    background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);

    border-color: #c43c35 #c43c35 #882a25;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

.btn.blue {

    color: #fff;

    background-color: #339bb9;

    background-repeat: repeat-x;

    background-image: linear-gradient(to bottom, #5bc0de, #339bb9);

    border-color: #339bb9 #339bb9 #22697d;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

.btn.green {

    color: #fff;

    background-color: #57a957;

    background-repeat: repeat-x;

    background-image: linear-gradient(to bottom, #62c462, #57a957);

    border-color: #57a957 #57a957 #3d773d;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

.btn.yellow {

    color: #fff;

    background-color: #faa732;

    background-repeat: repeat-x;

    background-image: linear-gradient(to bottom, #fbb450, #f89406);

    border-color: #f89406 #f89406 #ad6704;

    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

}

label.disabled {

    color: #aaa;

}

.btn.active {

    font-weight: bold;

}

ins, div.options a:hover {

    text-decoration: none;

}

img,

#header #header-inner #quick li a:hover span.normal,

#content div.panel div.form div.fields div.field div.textarea table td table td a,

#content div.panel div.form div.form-horizontal div.form-group div.textarea table td table td a,

#clone_url,

#clone_url_id

{

    border: none;

}

img.icon, .right .merge img {

    vertical-align: bottom;

}

#header ul#logged-user,

#content div.panel div.panel-heading ul.links,

#content div.panel div.message div.dismiss,

#content div.panel div.traffic div.legend ul {

    float: right;

    margin: 0;

    padding: 0;

}

#header #header-inner #home,

#header #header-inner #logo,

#content div.panel ul.left,

#content div.panel ol.left,

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

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

<%block name="title">

    ${_('Admin Journal')}

</%block>

<%def name="breadcrumbs_links()">

    <form id="filter_form">

    <input class="q_filter_box ${'' if c.search_term else 'initial'}" id="j_filter" size="15" type="text" name="filter" value="${c.search_term or _('journal filter...')}"/>

    <span class="tooltip" title="${h.journal_filter_help()}">?</span>

    ${_('Admin Journal')} - ${ungettext('%s Entry', '%s Entries', c.users_log.item_count) % (c.users_log.item_count)}

    </form>

    ${h.end_form()}

</%def>

<%block name="header_menu">

    ${self.menu('admin')}

</%block>

<%def name="main()">

<div class="panel panel-primary">

    <!-- box / title -->

    <div class="panel-heading">

        ${self.breadcrumbs()}

    </div>

    <!-- end box / title -->

    <div class="table">

        <div id="user_log">

            <%include file='admin_log.html'/>

        </div>

    </div>

</div>

<script>

$(document).ready(function() {

  $('#j_filter').click(function(){

    var $jfilter = $('#j_filter');

    if($jfilter.hasClass('initial')){

        $jfilter.val('');

    }

  });

  var fix_j_filter_width = function(len){

      $('#j_filter').css('width', Math.max(80, len*6.50)+'px');

  };

  $('#j_filter').keyup(function () {

    fix_j_filter_width($('#j_filter').val().length);

  });

  $('#filter_form').submit(function (e) {

      e.preventDefault();

      var val = $('#j_filter').val();

      window.location = "${url.current(filter='__FILTER__')}".replace('__FILTER__',val);

  });

  fix_j_filter_width($('#j_filter').val().length);

});

</script>

</%def>

            <div>

                ${h.gravatar_div(c.authuser.email, size=32)}

                <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="${h.safe_unicode(file.path)}" name="org_files">

                        <input id="filename_${h.FID('f',file.path)}" name="files" size="30" type="text" value="${h.safe_unicode(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">

                    $(document).ready(function(){

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

                        //inject new modes

                        var $mimetype_select = $('#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 = $('#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

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

                        if (detected_mode){

                            setCodeMirrorMode(myCodeMirror, detected_mode);

                            $mimetype_select.val(detected_mode.mime);

                        }

                    });

                </script>

            %endfor

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

            </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}', '_authentication_token': _authentication_token},

                    dataType: 'json',

                    type: 'POST',

                    success: function(data) {

                      if(data.success == false){

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

                      }

                      else{

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

                      }

                    }

                  });

              });

          </script>

        </div>

    </div>

</div>

</%def>

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

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

<%block name="title">

    %if c.show_private:

        ${_('Private Gists for User %s') % c.authuser.username}

    %elif c.show_public:

        ${_('Public Gists for User %s') % c.authuser.username}

    %else:

        ${_('Public Gists')}

    %endif

</%block>

<%def name="breadcrumbs_links()">

    %if c.show_private:

        ${_('Private Gists for User %s') % c.authuser.username}

    %elif c.show_public:

        ${_('Public Gists for User %s') % c.authuser.username}

    %else:

        ${_('Public Gists')}

    %endif

    - ${c.gists_pager.item_count}

</%def>

<%block name="header_menu">

    ${self.menu('gists')}

</%block>

<%def name="main()">

<div class="panel panel-primary">

    <!-- box / title -->

    <div class="panel-heading">

        ${self.breadcrumbs()}

        %if c.authuser.username != 'default':

        <ul class="links">

          <li>

          </li>

        </ul>

        %endif

    </div>

    %if c.gists_pager.item_count>0:

        % for gist in c.gists_pager:

          <div class="gist-item" style="padding:10px 20px 10px 15px">

            ${h.gravatar_div(gist.owner.email, size=28)}

            <div title="${gist.owner.full_contact}" class="user" style="font-size: 16px">

                <b>${h.person(gist.owner.full_contact)}</b> /

                <b><a href="${h.url('gist',gist_id=gist.gist_access_id)}">gist: ${gist.gist_access_id}</a></b>

            </div>

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

                ${_('Created')} ${h.age(gist.created_on)} /

                <span style="color: #AAA">

                  %if gist.gist_expires == -1:

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

                  %else:

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

                  %endif

                </span>

            </div>

            <div style="border:0px;padding:10px 0px 0px 40px;color:#AAA">${gist.gist_description}</div>

          </div>

        % endfor

        <div class="notification-paginator">

          <div class="pagination-wh pagination-left">

          ${c.gists_pager.pager('$link_previous ~2~ $link_next', **request.GET.mixed())}

          </div>

        </div>

    %else:

        <div class="table">${_('There are no gists yet')}</div>

    %endif

</div>

</%def>

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

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

<%block name="title">

    ${_('%s Repository Group Settings') % c.repo_group.name}

</%block>

<%def name="breadcrumbs_links()">

    ${h.link_to(_('Admin'),h.url('admin_home'))}

    »

    ${h.link_to(_('Repository Groups'),h.url('repos_groups'))}

    %if c.repo_group.parent_group:

        » ${h.link_to(c.repo_group.parent_group.name,h.url('repos_group_home',group_name=c.repo_group.parent_group.group_name))}

    %endif

    » ${h.link_to(c.repo_group.name,h.url('repos_group_home',group_name=c.repo_group.group_name))}

</%def>

<%def name="breadcrumbs_side_links()">

    <ul class="links">

      <li>

      </li>

    </ul>

</%def>

<%block name="header_menu">

    ${self.menu('admin')}

</%block>

<%def name="main()">

<div class="panel panel-primary" style="overflow:auto">

    <div class="panel-heading">

        ${self.breadcrumbs()}

        ${self.breadcrumbs_side_links()}

    </div>

    ##main

    <div style="width: 150px; float:left">

      <ul class="nav nav-pills nav-stacked">

        <li class="${'active' if c.active=='settings' else ''}"><a href="${h.url('edit_repo_group', group_name=c.repo_group.group_name)}">${_('Settings')}</a></li>

        <li class="${'active' if c.active=='advanced' else ''}"><a href="${h.url('edit_repo_group_advanced', group_name=c.repo_group.group_name)}">${_('Advanced')}</a></li>

        <li class="${'active' if c.active=='perms' else ''}"><a href="${h.url('edit_repo_group_perms', group_name=c.repo_group.group_name)}">${_('Permissions')}</a></li>

      </ul>

    </div>

    <div style="width:750px; float:left; padding: 10px 0px 0px 20px;margin: 0px 0px 0px 10px; border-left: 1px solid #DDDDDD">

        <%include file="/admin/repo_groups/repo_group_edit_${c.active}.html"/>

    </div>

</div>

</%def>

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

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

<%block name="title">

    ${_('Repository Groups Administration')}

</%block>

<%def name="breadcrumbs_links()">

    ${h.link_to(_('Admin'),h.url('admin_home'))} &raquo; <span id="repo_group_count">0</span> ${_('Repository Groups')}

</%def>

<%block name="header_menu">

    ${self.menu('admin')}

</%block>

<%def name="main()">

<div class="panel panel-primary">

    <!-- box / title -->

    <div class="panel-heading">

        ${self.breadcrumbs()}

        <ul class="links">

            %if h.HasPermissionAny('hg.admin')():

             <li>

             </li>

            %endif

        </ul>

    </div>

    <!-- end box / title -->

    <div class="table">

        <table id="datatable_list_wrap"></table>

    </div>

</div>

<script>

  var data = ${c.data|n};

  var myDataTable = $("#datatable_list_wrap").DataTable({

        data: data.records,

        columns: [

            {data: "raw_name", visible: false, searchable: false},

            {data: "group_name", orderData: 0, title: "${_('Name')}"},

            {data: "desc", title: "${_('Description')}", searchable: false},

            {data: "repos", title: "${_('Number of Top-level Repositories')}", searchable: false},

            {data: "owner", title: "${_('Owner')}", searchable: false},

            {data: "action", title: "${_('Action')}", sortable: false, searchable: false}

        ],

        drawCallback: updateRowCountCallback($("#repo_group_count")),

        pageLength: 100

    });

</script>

</%def>

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

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

<%block name="title">

    ${_('Repositories Administration')}

</%block>

<%def name="breadcrumbs_links()">

    <span id="repo_count">0</span> ${_('Repositories')}

</%def>

<%block name="header_menu">

    ${self.menu('admin')}

</%block>

<%def name="main()">

<div class="panel panel-primary">

    <div class="panel-heading">

        ${self.breadcrumbs()}

        <ul class="links">

         %if h.HasPermissionAny('hg.admin','hg.create.repository')():

          <li>

          </li>

         %endif

        </ul>

    </div>

    <div class="table">

        <table id="datatable_list_wrap"></table>

    </div>

</div>

<script>

  var data = ${c.data|n};

  var myDataTable = $("#datatable_list_wrap").DataTable({

        data: data.records,

        columns: [

            {data: "raw_name", visible: false, searchable: false},

            {data: "name", orderData: 1, title: "${_('Name')}"},

            {data: "desc", title: "${_('Description')}", searchable: false},

            {data: "last_rev_raw", visible: false, searchable: false},

            {data: "last_changeset", orderData: 4, title: "${_('Tip')}", searchable: false},

            {data: "owner", title: "${_('Owner')}", searchable: false},

            {data: "state", title: "${_('State')}", searchable: false},

            {data: "action", title: "${_('Action')}", sortable: false, searchable: false}

        ],

        drawCallback: updateRowCountCallback($("#repo_count")),

        pageLength: 100

    });

</script>

</%def>

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

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

<%block name="title">

    ${_('Users Administration')}

</%block>

<%def name="breadcrumbs_links()">

    ${h.link_to(_('Admin'),h.url('admin_home'))} &raquo; <span id="user_count">0</span> ${_('Users')}

</%def>

<%block name="header_menu">

    ${self.menu('admin')}

</%block>

<%def name="main()">

<div class="panel panel-primary">

    <!-- box / title -->

    <div class="panel-heading">

        ${self.breadcrumbs()}

        <ul class="links">

          <li>

          </li>

        </ul>

    </div>

    <!-- end box / title -->

    <div class="table">

        <table id="datatable_list_wrap"></table>

    </div>

</div>

<script>

    var data = ${c.data|n};

    var $dataTable = $("#datatable_list_wrap").DataTable({

        data: data.records,

        columns: [

            {data: "gravatar", sortable: false, searchable: false},

            {data: "username", title: "${_('Username')}"},

            {data: "firstname", title: "${_('First Name')}"},

            {data: "lastname", title: "${_('Last Name')}"},

            {data: "last_login_raw", visible: false, searchable: false},

            {data: "last_login", title: "${_('Last Login')}", orderData: 4, searchable: false},

            {data: "active", title: "${_('Active')}", searchable: false, 'sType': 'str'},

            {data: "admin", title: "${_('Admin')}", searchable: false, 'sType': 'str'},

            {data: "extern_type", title: "${_('Auth Type')}", searchable: false},

            {data: "action", title: "${_('Action')}", searchable: false, sortable: false}

        ],

        order: [[1, "asc"]],

        drawCallback: updateRowCountCallback($("#user_count")),

        pageLength: 100

    });

</script>

</%def>

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

    <!-- box / title -->

    <div class="panel-heading">

        ${self.breadcrumbs()}

        <ul class="links">

            <li>

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

            </li>

        </ul>

    </div>

    <div class="table" 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')}

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

            <div class="code-header">

                <div class="stats">

                    <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="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>

                <label class="commit" for="mimetype">${_('Editing file')}: ${c.file.unicode_path}</label>

                <select id="mimetype" name="mimetype"/>

            </div>

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

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

                <div style="padding: 10px;color:#666666">${_('Commit Message')}</div>

                <textarea 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">

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

<%page args="parent,group_name=''" />

    <div class="panel panel-primary">

        <!-- box / title -->

        <div class="panel-heading">

            %if c.authuser.username != 'default':

              <ul class="links">

                <li>

                <%