<commit_before>var TemplateBox = React.createClass({
  getInitialState: function() {
    return {data: [], selectedTemplate: ""};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  updateSelectedTemplateHandler: function(name) {
    this.setState({selectedTemplate: name});
  },
  render: function() {
    return (
      <div>
        <div className="panel panel-primary">
          <div className="panel-heading">
            <h3 className="panel-title">Vorlagen</h3>
          </div>
          <TemplateList data={this.state.data} updateHandler={this.updateSelectedTemplateHandler} />
        </div>
        <TemplateForm selectedTemplate={this.state.selectedTemplate} />
      </div>
    );
  }
});

var TemplateList = React.createClass({
  render: function() {
    var updateHandler = this.props.updateHandler
    var templateNodes = this.props.data.map(function(template) {
      return (
        <Template name={template.name} updateHandler={updateHandler} />
      );
    });
    return (
      <div className="list-group">
        {templateNodes}
      </div>
    );
  }
});

var Template = React.createClass({
  handleClick: function(event) {
    this.props.updateHandler(this.props.name);
  },
  render: function() {
    return (
      <button type="button" className="list-group-item" onClick={this.handleClick}>
        {this.props.name}
      </button>
    );
  }
});

var TemplateForm = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  xcomponentDidMount: function() {
    $.ajax({
      url: "/api/placeholders/" + this.props.selectedTemplate,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
        var inputNodes = this.state.data.map(function(varName) {
          return (
            <div className="form-group">
              <label for={varName}>{varName}</label>
              <input type="text" className="form-control" name={varName} id={varName} />
            </div>
          );
        });

    if (this.props.selectedTemplate != "") { this.xcomponentDidMount(); }
    else { return null; }
    return (
      <div className="panel panel-primary">
        <div className="panel-heading">
          <h3 className="panel-title">{this.props.selectedTemplate}</h3>
        </div>
        <div className="panel-body">
          <form action={"/api/render/" + this.props.selectedTemplate} method="POST" className="inputForm">
            {inputNodes}
            <div className="form-group">
              <label for="format">Format</label>
              <select id="format" name="format" className="form-control">
                <option value="html">HTML</option>
                <option value="odt">OpenDocument (.odt)</option>
                <option selected="selected" value="pdf">PDF</option>
                <option value="png">PNG</option>
                <option value="txt">Text</option>
                <option value="docx">Word (.docx)</option>
              </select>
            </div>
            <div className="form-group">
              <label for="engine">Engine</label>
              <select id="engine" name="engine" className="form-control">
                <option value="libreoffice">LibreOffice</option>
                <option value="wkhtmltopdf">wkhtmltopdf</option>
                <option value="pandoc">Pandoc</option>
              </select>
            </div>
            <input type="submit" className="btn btn-default" value="Dokument erstellen" />
          </form>
        </div>
      </div>
    );
  }
});

ReactDOM.render(
  <TemplateBox url="/api/templates" />,
  document.getElementById('templates')
);
<commit_msg>Do not show mustache suffix<commit_after>var TemplateBox = React.createClass({
  getInitialState: function() {
    return {data: [], selectedTemplate: ""};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  updateSelectedTemplateHandler: function(name) {
    this.setState({selectedTemplate: name});
  },
  render: function() {
    return (
      <div>
        <div className="panel panel-primary">
          <div className="panel-heading">
            <h3 className="panel-title">Vorlagen</h3>
          </div>
          <TemplateList data={this.state.data} updateHandler={this.updateSelectedTemplateHandler} />
        </div>
        <TemplateForm selectedTemplate={this.state.selectedTemplate} />
      </div>
    );
  }
});

var TemplateList = React.createClass({
  render: function() {
    var updateHandler = this.props.updateHandler
    var templateNodes = this.props.data.map(function(template) {
      return (
        <Template name={template.name} updateHandler={updateHandler} />
      );
    });
    return (
      <div className="list-group">
        {templateNodes}
      </div>
    );
  }
});

var Template = React.createClass({
  handleClick: function(event) {
    this.props.updateHandler(this.props.name);
  },
  render: function() {
    return (
      <button type="button" className="list-group-item" onClick={this.handleClick}>
        {this.props.name.replace(".mustache", "")}
      </button>
    );
  }
});

var TemplateForm = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  xcomponentDidMount: function() {
    $.ajax({
      url: "/api/placeholders/" + this.props.selectedTemplate,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
        var inputNodes = this.state.data.map(function(varName) {
          return (
            <div className="form-group">
              <label for={varName}>{varName}</label>
              <input type="text" className="form-control" name={varName} id={varName} />
            </div>
          );
        });

    if (this.props.selectedTemplate != "") { this.xcomponentDidMount(); }
    else { return null; }
    return (
      <div className="panel panel-primary">
        <div className="panel-heading">
          <h3 className="panel-title">{this.props.selectedTemplate.replace(".mustache", "")}</h3>
        </div>
        <div className="panel-body">
          <form action={"/api/render/" + this.props.selectedTemplate} method="POST" className="inputForm">
            {inputNodes}
            <div className="form-group">
              <label for="format">Format</label>
              <select id="format" name="format" className="form-control">
                <option value="html">HTML</option>
                <option value="odt">OpenDocument (.odt)</option>
                <option selected="selected" value="pdf">PDF</option>
                <option value="png">PNG</option>
                <option value="txt">Text (.txt)</option>
                <option value="docx">Word (.docx)</option>
              </select>
            </div>
            <div className="form-group">
              <label for="engine">Engine</label>
              <select id="engine" name="engine" className="form-control">
                <option value="libreoffice">LibreOffice</option>
                <option value="pandoc">Pandoc</option>
                <option value="wkhtmltoimage">Wkhtmltoimage</option>
                <option value="wkhtmltopdf">Wkhtmltopdf</option>
              </select>
            </div>
            <input type="submit" className="btn btn-default" value="Dokument erstellen" />
          </form>
        </div>
      </div>
    );
  }
});

ReactDOM.render(
  <TemplateBox url="/api/templates" />,
  document.getElementById('templates')
);

{'fraction_non_alphanumeric': 0.15956943458717768, 'fraction_numerical': 0.0009462976105985332, 'mean_word_length': 2.3471892319873318, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 129, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2959816', 'n_tokens_mistral': 2440, 'n_tokens_neox': 2409, 'n_words': 430}