{% extends "layout.html" %}

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

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

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

   <table cellpadding=2 border=0>
     <tr><td><b>Material</b></td><td colspan=5><hr></td></tr>

     <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="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><b>X-ray Energy</b></td><td colspan=5><hr></td></tr>
     <tr>
         <td> <label for="e1">Energy Range (eV):</label></td>
         <td> <input style="width: 80px;" type="number" id="e1" name="e1"
                     min="0" max="725000" step="{{de}}" value="{{request.form['e1']}}">
          <label for="e2">:</label>
          <input style="width: 80px;" type="number" id="e2" name="e2"
               min="0" max="725000" step="{{de}}" value="{{ request.form['e2'] }}"> </td>
         <td> <label for="de"> Energy Step (eV):</label> </td>
         <td>
           <select style="width: 100px;" name="de" id="de" onchange="update_step('e1', 'e2', 'de')">
             <option value="1" {% if de ==1 %} selected {% endif %}>1</option>
             <option value="2" {% if de == 2 %} selected {% endif %}>2</option>
             <option value="5" {% if de == 5 %} selected {% endif %}>5</option>
             <option value="10" {% if de ==10 %} selected {% endif %}>10</option>
             <option value="20" {% if de == 20 %} selected {% endif %}>20</option>
             <option value="50" {% if de == 50 %} selected {% endif %}>50</option>
             <option value="100" {% if de == 100 %} selected {% endif %}>100</option>
             <option value="200" {% if de == 200 %} selected {% endif %}>200</option>
             <option value="500" {% if de == 500 %} selected {% endif %}>500</option>
             <option value="1000" {% if 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>  <input type="submit" value="Submit"></td>
       <td> <a href="https://xraypy.github.io/XrayDB/examples.html#x-ray-attenuation-by-elements"> documentation </a></td>

       {% if mu_plot %}
       <td>
         <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'],
                  fname='xrayweb_atten.txt')}}">  data file</a>
       </td>
       <td>
         <a href="{{url_for('attenscript',
                  formula=request.form['formula'],
                  rho=request.form['density'],
                  t=request.form['thickness'],
                  e1=request.form['e1'],
                  e2=request.form['e2'],
                  de=request.form['de'],
                  fname='xrayweb_atten.py')}}"> python script </a>
       </td>
       <td>
         <a href="{{url_for('atten')}}{{request.form['formula']}}/{{request.form['density']}}/{{request.form['thickness']}}/{{request.form['e1']}}/{{request.form['e2']}}/{{request.form['de']}}">
           permalink </a>
       </td>
       {% endif %}
     </tr>


   </table>

  </form>

    {% if mu_plot %}
   <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 %}
