<div class="box">

    <!-- box / title -->

    <div class="title">

        ${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">

          ${h.form(h.url.current(),method='post',id='eform',enctype="multipart/form-data", class_="form-horizontal")}

          <h3 class="files_location">

            ${_('Location')}: ${h.files_breadcrumbs(c.repo_name,c.cs.raw_id,c.f_path)} /

              <span id="filename_container" class="file reviewer_ac">

                  <input class="input-small" type="text" value="" size="30" name="filename" id="filename" placeholder="${_('Enter filename...')}">

                  <input type="hidden" value="${c.f_path}" size="30" name="location" id="location">

                  ${_('or')} <div class="btn btn-small" id="upload_file_enable">${_('Upload File')}</div>

              </span>

              <span id="upload_file_container" class="reviewer_ac" style="display:none">

                  <input type="file"  size="20" name="upload_file" id="upload_file">

                  ${_('or')} <div class="btn btn-small" id="file_enable">${_('Create New File')}</div>

              </span>

          </h3>

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

            <div class="code-header" id="set_mode_header">

                <label class="commit" for="set_mode">${_('New file mode')}</label>

                ${h.select('set_mode','plain',[('plain',_('plain'))])}

            </div>

                <div id="editor_container">

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

                    <textarea id="editor" name="content" style="display:none"></textarea>

                </div>

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

                <textarea id="commit" name="message" style="height: 100px;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-small btn-success")}

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

            </div>

            ${h.end_form()}

            <script type="text/javascript">

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

            var myCodeMirror = initCodeMirror('editor',reset_url);

            CodeMirror.modeURL = "${h.url('/js/mode/%N/%N.js')}";

            //inject new modes, based on codeMirrors modeInfo object

                var selected = e.currentTarget;

                var new_mode = selected.options[selected.selectedIndex].value;

                setCodeMirrorMode(myCodeMirror, new_mode);

            </script>

        </div>

    </div>

</div>

</%def>