}
.font-size-175 {
  font-size: 175%;
}
.font-size-200 {
  font-size: 200%;
}

.tab-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tab-container > #fossil-status-bar {

  align-self: baseline;
}
.tab-container > .tab-bar > button.selected {
  font-style: italic;
  font-weight: bold;
  margin: 0 0.5em;
  text-decoration: underline;
}
.tab-container > .tabs > .tab-panel > .fileedit-options {
  margin-top: 0;
  border: none;
  border-radius: 0;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
}
.tab-container > .tabs > .tab-panel > .fileedit-options > button {
  vertical-align: middle;
  margin: 0.5em;
}
.flex-container {
    display: flex;
}
.flex-container.row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.flex-container.row.stretch {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
}
.flex-container.column {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.flex-container.column.stretch {
    align-items: stretch;
    margin: 0;
}

enum fileedit_render_preview_flags {
FE_PREVIEW_LINE_NUMBERS = 1
};
enum fileedit_render_modes {
/* GUESS must be 0. All others have unspecified values. */
FE_RENDER_GUESS = 0,
FE_RENDER_PLAIN_TEXT,
FE_RENDER_HTML_IFRAME,
FE_RENDER_HTML_INLINE,
FE_RENDER_WIKI
};

static int fileedit_render_mode_for_mimetype(const char * zMimetype){
  int rc = FE_RENDER_PLAIN_TEXT;
  if( zMimetype ){
    if( fossil_strcmp(zMimetype, "text/html")==0 ){
      rc = FE_RENDER_HTML_IFRAME;
    }else if( fossil_strcmp(zMimetype, "text/x-fossil-wiki")==0
              || fossil_strcmp(zMimetype, "text/x-markdown")==0 ){
      rc = FE_RENDER_WIKI;
    }
  }
  return rc;
}

                                    int nIframeHeightEm){
  const char * zMime;
  zMime = mimetype_from_name(zFilename);
  if(FE_RENDER_GUESS==renderMode){
    renderMode = fileedit_render_mode_for_mimetype(zMime);
  }
  switch(renderMode){
    case FE_RENDER_HTML_IFRAME:{
      char * z64 = encode64(blob_str(pContent), blob_size(pContent));
      CX("<iframe width='100%%' frameborder='0' "
         "marginwidth='0' style='height:%dem' "
         "marginheight='0' sandbox='allow-same-origin' "
         "id='ifm1' src='data:text/html;base64,%z'"
         "></iframe>",
         nIframeHeightEm ? nIframeHeightEm : 40,
         z64);
      break;
    }
    case FE_RENDER_HTML_INLINE:{
      CX("%b",pContent);
      break;
    }
    case FE_RENDER_WIKI:
      wiki_render_by_mimetype(pContent, zMime);
      break;
    default:{
      const char *zExt = strrchr(zFilename,'.');
      const char *zContent = blob_str(pContent);

  /****** Preview tab ******/
  {
    CX("<div id='fileedit-tab-preview' "
       "data-tab-parent='fileedit-tabs' "
       "data-tab-label='Preview'"
       ">");

    CX("<div class='fileedit-options flex-container row'>");



    CX("<button>Refresh</button>");
    /* Default preview rendering mode selection... */
    previewRenderMode = fileedit_render_mode_for_mimetype(zFileMime);
    style_select_list_int("select-preview-mode",
                          "preview_render_mode",
                          "Preview Mode",
                          "Preview mode format.",
                          previewRenderMode,
                          "Guess", FE_RENDER_GUESS,
                          "Wiki/Markdown", FE_RENDER_WIKI,
                          "HTML (iframe)", FE_RENDER_HTML_IFRAME,
                          "HTML (inline)", FE_RENDER_HTML_INLINE,
                          "Plain Text", FE_RENDER_PLAIN_TEXT,
                          NULL);
    /*
    ** Set up a JS-side mapping of the FE_RENDER_xyz values. This is
    ** used for dynamically toggling certain UI components on and off.
    */
    blob_appendf(&endScript, "fossil.page.previewModes={"
                 "guess: %d, %d: 'guess', wiki: %d, %d: 'wiki',"
                 "htmlIframe: %d, %d: 'htmlIframe', "
                 "htmlInline: %d, %d: 'htmlInline', "
                 "text: %d, %d: 'text'"
                 "};\n",
                 FE_RENDER_GUESS, FE_RENDER_GUESS,
                 FE_RENDER_WIKI, FE_RENDER_WIKI,
                 FE_RENDER_HTML_IFRAME, FE_RENDER_HTML_IFRAME,
                 FE_RENDER_HTML_INLINE, FE_RENDER_HTML_INLINE,
                 FE_RENDER_PLAIN_TEXT, FE_RENDER_PLAIN_TEXT);
    /* Allow selection of HTML preview iframe height */
    previewHtmlHeight = atoi(PD("preview_html_ems","0"));
    if(!previewHtmlHeight){
      previewHtmlHeight = 40;
    }
    style_select_list_int("select-preview-html-ems",

    style_labeled_checkbox("cb-line-numbers",
                           "preview_ln",
                           "Add line numbers to plain-text previews?",
                           "1",
                           "If on, plain-text files (only) will get "
                           "line numbers added to the preview.",
                           P("preview_ln")!=0);
    CX("</div>"/*.fileedit-options*/);
    CX("<div id='fileedit-tab-preview-wrapper'></div>");
    CX("</div>"/*#fileedit-tab-preview*/);
  }

  /****** Diff tab ******/
  {
    CX("<div id='fileedit-tab-diff' "
       "data-tab-parent='fileedit-tabs' "
       "data-tab-label='Diff'"
       ">");

    CX("<div class='fileedit-options flex-container row' "
       "id='fileedit-tab-diff-buttons'>"
       "<button class='sbs'>Side-by-side</button>"
       "<button class='unified'>Unified</button>"
       "</div>");
    CX("<div id='fileedit-tab-diff-wrapper'>"
       "Diffs will be shown here."
       "</div>");
    CX("</div>"/*#fileedit-tab-diff*/);
  }


  /****** Commit ******/
  CX("<div id='fileedit-tab-commit' "
     "data-tab-parent='fileedit-tabs' "
     "data-tab-label='Commit'"
     ">");

  {
    /******* Flags/options *******/
    CX("<div class='fileedit-options flex-container row'>");




    style_labeled_checkbox("cb-dry-run",
                           "dry_run", "Dry-run?", "1",
                           "In dry-run mode, the Save button performs "
                           "all work needed for saving but then rolls "
                           "back the transaction, and thus does not "
                           "really save.",
                           1);

                          "editor_font_size", "Editor Font Size",
                          NULL/*tooltip*/,
                          100,
                          "100%", 100, "125%", 125,
                          "150%", 150, "175%", 175,
                          "200%", 200, NULL);
#endif
    CX("</div>"/*checkboxes*/);
  }

  { /******* Comment *******/
    CX("<fieldset class='fileedit-options'>"
       "<legend>Message (required)</legend><div>");
    CX("<input type='text' name='comment' "
       "id='fileedit-comment'>");
    /* ^^^ adding the 'required' attribute means we cannot even
       submit for PREVIEW mode if it's empty :/. */
    if(blob_size(&cimi.comment)){
      blob_appendf(&endScript,
                   "document.querySelector('#fileedit-comment').value="
                   "\"%h\";\n", blob_str(&cimi.comment));
    }
    CX("</input>\n");
    CX("<div class='fileedit-hint'>Comments use the Fossil wiki markup "
       "syntax.</div>\n"/*TODO: select for fossil/md/plain text*/);
    CX("</div></fieldset>\n"/*commit comment*/);
    CX("<div class='flex-container row'>"
       "<button id='fileedit-btn-commit'>Commit</button>"
       "</div>\n");
    CX("<div id='fileedit-manifest'></div>\n");
  }

  CX("</div>"/*#fileedit-tab-commit*/);
  

        const mode = e.target.value,
              name = P.previewModes[mode],
              hide = [], unhide = [];
        if('guess'===name){
          unhide.push(P.e.cbLineNumbersWrap,
                      P.e.selectHtmlEmsWrap);
        }else{
          if('text'===name) unhide.push(P.e.cbLineNumbersWrap);
          else hide.push(P.e.cbLineNumbersWrap);
          if('htmlIframe'===name) unhide.push(P.e.selectHtmlEmsWrap);
          else hide.push(P.e.selectHtmlEmsWrap);
        }
        hide.forEach((e)=>e.classList.add('hidden'));
        unhide.forEach((e)=>e.classList.remove('hidden'));
      }, false
    );
    selectPreviewMode.dispatchEvent(
      // Force UI update