{% extends "layout.html" %}

{% block body %}
<p><div class=subtitle>X-ray Attenuation of Materials: Enter Chemical Formula</div></p>
<div class=body>

  {% if errors %}
    {% for e in range(errors) %}
      <p>{{message[e]}}</p>
    {% endfor %}
  {% endif %}

    <form action="{{url_for('formula')}}" method="post">

   <table cellpadding=2 border=0>
       <tr>
         <td><label for="formula">Chemical Formula:</label></td>

         <td><input style="width: 180px;" type="text" id="formula"
                    name="formula" value="{{ request.form['formula'] }}">
         </td>
         <td><label for="density">Density (g/cm^3):</label></td>
         <td><input style="width: 100px;" type="text" id="density"
                    name="density" value="{{ request.form['density'] }}">
         </td>
         <td><label for="mats">Select known material:</label></td>
         <td>
           <select name="mats" id="mats" style="width: 150px;"
                   onchange="displayinfo('mats', 'formula', 'density')">
            <option></option>
            {% for mat in matlist %}
            <option value="{{mat}}"
                    {% if request.form['mats'] == mat %} selected {% endif %}>
              {{mat}}</option>
            {% endfor %}
        </select>
       </td></tr>

       <tr>
         <td> <label for="e1">Energy Range (eV):</label></td>
         <td> <input style="width: 80px;" type="number" id="e1" name="e1"
                     min="50" max="725000" step="50" value="{{ request.form['e1'] }}">
          <label for="e2">:</label>
          <input style="width: 80px;" type="number" id="e2" name="e2"
                  min="50" max="725000" step="50" value="{{ request.form['e2'] }}"> </td>
         <td> <label for="de"> Energy Step (eV):</label></td>
         <td>
           <select style="width: 100px;" name="de" id="de">
             <option value="1" {% if request.form['de'] == "1" %} selected {% endif %}>1</option>
             <option value="2" {% if request.form['de'] == "2" %} selected {% endif %}>2</option>
             <option value="5" {% if request.form['de'] == "5" %} selected {% endif %}>5</option>
             <option value="10" {% if request.form['de'] == "10" %} selected {% endif %}>10</option>
             <option value="20" {% if request.form['de'] == "20" %} selected {% endif %}>20</option>
             <option value="50" {% if request.form['de'] == "50" %} selected {% endif %}>50</option>
             <option value="100" {% if request.form['de'] == "100" %} selected {% endif %}>100</option>
             <option value="200" {% if request.form['de'] == "200" %} selected {% endif %}>200</option>
             <option value="500" {% if request.form['de'] == "500" %} selected {% endif %}>500</option>
             <option value="1000" {% if request.form['de'] == "1000" %} selected {% endif %}>1000</option>
           </select>
         </td>

         <td> <label for="mode">Plot Mode:</label> </td>
         <td>
           <select style="width: 100px;" name="mode" id="mode">
             <option value="Log"    {% if request.form['mode'] == "Log" %}
                     selected {% endif %}>  Log</option>
             <option value="Linear" {% if request.form['mode'] == "Linear" %}
                     selected {% endif %}>Linear</option>
           </select>
         </td>
       </tr>

       <tr>
         <td> <label for="thickness">Thickness (mm):</label></td>
         <td> <input style="width: 80px;" type="number" id="thickness" name="thickness"
                     min="0" step="0.001" value="{{ request.form['thickness'] }}">
         </td>
       </tr>

       <tr><td>  <input type="submit" value="Submit"></td></tr>
        </table>

  </form>
  <p>
  </p>


  {% if mu_plot %}

   <a href="{{url_for('attendata',
           formula=request.form['formula'],
           rho=request.form['density'],
           t=request.form['thickness'],
           e1=request.form['e1'],
           e2=request.form['e2'],
           de=request.form['de'])}}"> download data file</a><br>

   <script src="{{url_for('static', filename= 'plotly-2021.js') }}" ></script>

   <table cellpadding=2 border=0 style='vertical-align: top; '>
     <tr style='vertical-align: top; '>
       <td>
         <div id="atten_plot">
           <script  type="text/javascript">
             var graph = {{atten_plot | safe}};
             Plotly.plot('atten_plot',   graph.data,   graph.layout || {},  config=graph.config);
           </script>
         </div>
       </td>
       <td>
         <div id="mu_plot">
           <script  type="text/javascript">
             var graph = {{mu_plot | safe}};
             Plotly.plot('mu_plot',   graph.data,   graph.layout || {},  config=graph.config);
           </script>
         </div>
   </td></tr></table>
    {% endif %}


  </div>
</div>

{% endblock %}
