{% extends "parent/convert.htm" %}

{% block head %}
{{ super() }}
<script type="module" src="{{url_for('static', filename='javascript/convert_ob.js')}}"></script>
{% endblock %}


{% block file_upload_display %}
<div class="flex-panel-display">
  <div class="flex-panel instructions-panel">
    <h6>Select flags and options for the file formats</h6>
    <p>
      One or more input or output flags may be selected if required (hold command [Mac] or CTRL [Windows]
      to select multiple options; and use command+click [Mac] or CTRL+click [Windows] to unselect an option).
      To undo all selections in a box, click just underneath the final option. Ticking a check box reveals a
      text box for entry of required information, along with further explanation if available.
    </p>
    <p>Zero to two option flag select boxes and zero to two sets of option flag check boxes may be displayed,
      depending on the conversion and the degree of completion of the database. Further information may be
      displayed underneath the select boxes if available.
    </p>
  </div>
  <hr class="small-screen-only">
  <div class="flex-panel">
    <div id="flags">
      <div id="inFlagList">
        <p>
          <label for="inFlags" id="in_label">Read (input) option flags
            (see accompanying text for guidance on multiple selections):</label>
          <select id="inFlags" class="large-width" size="4" multiple="multiple"></select>
        <div id=inFlagInfo></div>
        </p>
      </div>
      <div id="outFlagList">
        <p>
          <label for="outFlags" id="out_label">Write (output) option flags
            (see accompanying text for guidance on multiple selections):</label>
          <select id="outFlags" class="large-width" size="4" multiple="multiple"></select>
        <div id=outFlagInfo></div>
        </p>
      </div>
    </div>
    <span id="in_argLabel">Read (input) option flags requiring further information (select all required):</span>
    <table id="in_argFlags"></table>
    <div id="flag_break"><br /></div>
    <span id="out_argLabel">Write (output) option flags requiring further information (select all
      required):</span>
    <table id="out_argFlags"></table>
  </div>
</div>
<div class="flex-panel-display">
  <div class="flex-panel instructions-panel">
    <h6>Select coordinate generation mode</h6>
    <p>If 2- or 3-dimensional atomic coordinates need to be calculated (e.g., if they do not already exist in the
      input file), select “2D” or “3D” and a speed/accuracy option (“fastest” is least accurate). Note that this
      calculation is not appropriate for all file formats, so in these cases selections will be ignored.
    </p>
  </div>
  <hr class="small-screen-only">
  <div class="flex-panel">
    <p>
      <label for="coordinates">Select “2D” or “3D” if an Open Babel calculation of 2- or 3-dimensional atomic
        coordinates is required. Ensure that this calculation is suitable for your purpose.<br>For more
        information,
        visit <a href="https://openbabel.org/docs/3DStructureGen/SingleConformer.html#gen3d" target="_blank">this
          website.</a></label><br>
      <input type="radio" name="coordinates" id="coordinates" value="Gen2D"> 2D
      <input type="radio" name="coordinates" id="coordinates" value="Gen3D"> 3D
      <input type="radio" name="coordinates" id="coordinates" value="neither" checked="checked">
      neither
    </p>
    <p>
      <label for="coordOptions"> Calculation options range from 'fastest'
        (least accurate) to “best” (slowest).</label><br>
      <input type="radio" name="coordOptions" id="coordOptions" value="fastest" disabled=true> fastest
      <input type="radio" name="coordOptions" id="coordOptions" value="fast" disabled=true> fast
      <input type="radio" name="coordOptions" id="coordOptions" value="medium" checked="checked" disabled=true>
      medium
      <input type="radio" name="coordOptions" id="coordOptions" value="better" disabled=true> better
      <input type="radio" name="coordOptions" id="coordOptions" value="best" disabled=true> best
    </p>
  </div>
</div>
{{ super() }}
{% endblock %}