{% extends "base.html" %}

{% block css %}
<link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.css" type="text/css"/>
<link href="{{ static_url('css/select2.min.css')}}" rel="stylesheet">
<link href="{{ static_url('css/select2-bootstrap-theme.min.css')}}" rel="stylesheet">
<link href="{{ static_url('css/icheck-bootstrap.min.css')}}" rel="stylesheet">
{% end %}

{% block body %}
<h1 class="page-header">New HST Calculation</h1>

<form enctype="multipart/form-data" class="form-horizontal" action="/calculation/newHST" method="post" id="calculation-form">

    <div class="form-group">
        <label class="col-md-3 control-label" for="calcName">Name</label>

        <div class="col-md-9">
            <input type="text" class="form-control" id="calcName" name="calcName" value="My New Calculation">
            <p class="help-block">Provide a name for this calculation</p>
        </div>
    </div>

    <!-- <hr class="col-md-11 col-md-offset-1"> -->

    <!-- <div class="form-group">
        <label class="col-md-3 control-label" for="" style="top: 35px;">Star/Planet Properties</label>
        <div class="col-md-9">
            <div class="radio-chooser">
                <div class="radio-chooser-item">
                    <label class="radio-chooser-content" for="ResolveTarget">
                        <input type="radio" name="properties" id="ResolveTarget" value="exomast" />
                        <div class="radio-chooser-title">Load Target Properties</div>
                    </label>
                </div>
                <div class="radio-chooser-item">
                    <label class="radio-chooser-content" for="UserDefine">
                        <input type="radio" name="properties" id="UserDefine" value="user" />
                        <div class="radio-chooser-title">User Defined Properties</div>
                    </label>
                </div>
            </div>
        </div>
    </div>  -->

    <hr class="col-md-11">

    {% include 'target_resolve.html' %}

    <hr class="col-md-11">

    <div class="form-group define-properties">
        <div class="col-md-offset-3 col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" id="Jmag" name="Jmag" value="{{ data['star']['jmag'] }}">
                <span class="input-group-addon">J</span>
            </div>
            <p class="help-block">Magnitude for the Host Star</p>
        </div>

        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" id="Hmag" name="Hmag" value="{{ data['star']['hmag'] }}">
                <span class="input-group-addon">H</span>
            </div>
            <p class="help-block">Color correction for higher accuracy</p>
        </div> 

        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" id="stempc" name="stempc" value="{{ data['star']['temp'] }}">
            </div>
            <p class="help-block">Stellar Teff(K)</p>
        </div>

    </div>


    <div class="form-group define-properties">
        <div class="col-md-offset-3 col-md-3 form-inline">
            <input type="text" class="form-control" id="refradc" name="refradc" style="width: 60%;" value="{{ data['planet']['radius'] }}">
            <div class="input-group-btn" style="width: 30%;left: -4px;display: inline-block;">
                <select id="r_unitc" name="r_unitc" class="form-control">
                <option value='R_jup'>R<sub>J</sub></option>
                <option value='kilometer'>Km</option>
                <option value='m'>m</option>
                <option value='R_earth'>R<sub>E</sub></option>
                <option value='R_sun'>R<sub>S</sub></option>
                </select>
            </div>
            <p class="help-block">Planet Radius</p>
        </div>

        <div class="col-md-3 form-inline">
            <input type="text" class="form-control" id="rstarc" name="rstarc" style="width: 60%;" value="{{ data['star']['radius'] }}">
            <div class="input-group-btn" style="width: 30%;left: -4px;display: inline-block;">
                <select id="rstar_unitc" name="rstar_unitc" class="form-control">
                <option value='R_sun'>R<sub>S</sub></option>
                <option value='kilometer'>Km</option>
                <option value='m'>m</option>
                <option value='R_earth'>R<sub>E</sub></option>
                <option value='R_jup'>R<sub>J</sub></option>
                </select>
            </div>
            <p class="help-block">Stellar Radius</p>
        </div>
    </div>

    <div class="form-group define-properties">
        <div class="col-md-offset-3 col-md-3">
            <input type="text" class="form-control" id="period" name="period" value="{{ data['planet']['period'] }}">
            <p class="help-block">Orbital period in days.</p>
        </div>

        <div class="col-md-3">
            <input type="text" class="form-control" id="transit_duration" name="transit_duration" value= "{{ data['planet']['transit_duration'] }}">
            <p class="help-block">Full transit/eclipse duration in days.</p>
        </div>

        <!--div class="col-md-3">
            <input type="text" class="form-control" id="depth" name="depth">
            <p class="help-block">Approximate transit/eclipse depth for plotting purposes.</p>
        </div-->

        <div class="col-md-3">
            <input type="text" class="form-control" id="i" name="i" value="{{ data['planet']['i'] }}">
            <p class="help-block">Orbital inclination in degrees.</p>
        </div>

        <div class="col-md-3 col-md-offset-3">
            <input type="text" class="form-control" id="ars" name="ars" value="{{ data['planet']['ars'] }}">
            <p class="help-block">Semi-major axis in units of stellar radii (a/R<sub>*</sub>).</p>
        </div>

        <div class="col-md-3">
            <input type="text" class="form-control" id="ecc" name="ecc" value="{{ data['planet']['ecc'] }}">
            <p class="help-block">Orbital eccentricity.</p>
        </div>

        <div class="col-md-3">
            <input type="text" class="form-control" id="w" name="w" value="{{ data['planet']['w'] }}">
            <p class="help-block">Longitude of periastron in degrees.<br>Leave blank if eccentricity is zero.</p>
        </div>
    </div>

    <hr class="col-md-11 col-md-offset-1">

    <div class="form-group">
        <label class="col-md-3 control-label" for="" style="top: 35px;">Planet Model</label>
        <div class="col-md-9">
            <div class="radio-chooser">
                <div class="radio-chooser-item">
                    <label class="radio-chooser-content" for="planetModelConstant">
                        <input type="radio" name="planetModel" id="planetModelConstant" value="constant" />
                        <div class="radio-chooser-title">Constant Value</div>
                    </label>
                </div>
                <div class="radio-chooser-item">
                    <label class="radio-chooser-content" for="planetModelUser">
                        <input type="radio" name="planetModel" id="planetModelUser" value="user" />
                        <div class="radio-chooser-title">Upload Spectrum</div>
                    </label>
                </div>
                <div class="radio-chooser-item">
                    <label class="radio-chooser-content" for="planetModelGrid">
                        <input type="radio" name="planetModel" id="planetModelGrid" value="grid" />
                        <div class="radio-chooser-title">Select From Grid</div>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group hidden select-from-grid">
        <div class="col-md-3 col-md-offset-3"">
            <select id="ptempg" name="ptempg" class="form-control" data-placeholder="Select Temp (K)">
                <option value=""></option>
                {% for i in temp %}
                    <option {{ escape(i) }} value={{ escape(i) }}>{{ escape(i) }}</option>
                {% end %}
            </select>
            <p class="help-block">Temperature (K)</p>
        </div>

        <div class="col-md-3">
            <select id="pchem" name="pchem" class="form-control" data-placeholder="Select Chemistry">
                <option value=""></option>
                <option value='noTiO'>Equilibrium Chemistry</option>
                <option value='eqchem'>Equilibrium Chemistry, w/ TiO</option>
            </select>
            <p class="help-block">Select Chemistry Type</p>
        </div>

        <div class="col-md-3">
            <select id="cloud" name="cloud" class="form-control" data-placeholder="Clouds/Scattering">
                <option value=""></option>
                <option value="0">Nothing</option>
                <option value="ray10">Weak Rayleigh</option>
                <option value="ray100">Medium Rayleigh</option>
                <option value="ray1000">Strong Rayleigh</option>
                <option value="flat1">Weak Cloud</option>
                <option value="flat10">Medium Cloud</option>
                <option value="flat100">Strong Cloud</option>
            </select>
            <p class="help-block">Clouds or Scattering</p>
        </div>

        <div class="col-md-4 col-md-offset-3 form-inline">
            <input type="text" class="form-control" id="pmass" name="pmass" style="width: 70%;" value="1.5">
        <div class="input-group-btn" style="width: 20%;left: -4px;display: inline-block;">
            <select id="m_unit" name="m_unit" class="form-control">
                <option value='M_jup'>M<sub>J</sub></option>
                <option value='kilogram'>Kg</option>
                <option value='g'>g</option>
                <option value='M_earth'>M<sub>E</sub></option>
                <option value='M_sun'>M<sub>S</sub></option>
            </select>
            </div>
            <p class="help-block">Planet Mass</p>
        </div>
        </div>

    <div class="form-group hidden upload-planet-section">
        <div class="col-md-3 col-md-offset-3">
            <button class="btn btn-block niceFileBtn" type="button">Choose File</button>
            <input type="file" id="planFile" name="planFile" style="display: none">
            <p class="help-block text-center">Column 1: wave or time <br>Column 2: Model, no header</p>
        </div>
        <div class="col-md-3">
            <select id="planwunits" name="planwunits" class="form-control" data-placeholder="Select Wave or Time Units">
                <option value=""></option>
                <option value="sec">seconds</option>
                <option value="um">micron</option>
                <option value="nm">nanometer</option>
                <option value="cm">centimeter</option>
                <option value="Angs">Angstrom</option>
                <option value="Hz">Hertz</option>
            </select>
        </div>
        <div class="col-md-3">
            <select id="planfunits" name="planfunits" class="form-control" data-placeholder="Select Planet Model Units">
                <option value=""></option>
                <option value="rp^2/r*^2">(R<sub>p</sub>/R<sub>*</sub>)^2 (primary)</option>
                <option value="fp/f*">F<sub>p</sub>/F<sub>*</sub> (secondary/phase curve)</option>
            </select>
        </div>
    </div>

    <div class="form-group hidden constant-transit-section">
         <div class="col-md-3 col-md-offset-3">
            <select id="constant_unit" name="constant_unit" class="form-control" data-placeholder="Select Planet Model Units">
                <option value=""></option>
                <option value="rp^2/r*^2">(R<sub>p</sub>/R<sub>*</sub>)^2 (primary)</option>
                <option value="fp/f*">F<sub>p</sub>/F<sub>*</sub> (secondary/phase curve)</option>
            </select>
         <p class="help-block">Primary or Secondary</p>
        </div>
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" id="ptempc" name="ptempc" value="Only for Secondary">
            </div>
            <p class="help-block">Planet Temp(K)</p>
        </div>
    </div>

    <hr class="col-md-11 col-md-offset-1">

    <div class="form-group">
        <label class="col-md-3 control-label" for="obsParams">Observation Parameters</label>
        <div class="col-md-3">
            <input type="text" class="form-control" id="norbits" name="norbits" >
            <p class="help-block">Number of HST orbits per visit. Leave blank to let the program determine this value.</p>
        </div>

        <div class="col-md-3">
            <input type="text" class="form-control" id="noccultations" name="noccultations" >
            <p class="help-block">Number of transits/eclipses.</p>
        </div>

        <div class="col-md-3">
            <input type="text" class="form-control" id="nchan" name="nchan" >
            <p class="help-block">Number of spectrophotometric channels.</p>
        </div>

        <div class="clearfix"></div>

        <div class="col-md-3 col-md-offset-3">
            <div class="input-group">
                <input type="text" class="form-control" id="windowSize" name="windowSize" value="20">
                <span class="input-group-addon">min</span>
            </div>
            <p class="help-block">Observation start window size.</p>
        </div>
        <div class="col-md-3">
            <select id="useFirstOrbit" name="useFirstOrbit" class="form-control">
                <option value="False">False</option>
                <option value="True">True</option>
            </select>
            <p class="help-block">Use the first orbit.</p>
        </div>

        <div class="col-md-3">
            <input type="text" class="form-control" id="targetFluence" name="targetFluence" value="30000" >
            <p class="help-block">Target fluence in electrons per pixel.</p>
        </div>

    </div>

    <hr class="col-md-11 col-md-offset-1">

    <div class="form-group">
        <label class="col-md-3 control-label" for="instrument">Instrument</label>
        <div class="col-md-3">
            <select id="instrument" name="instrument" class="form-control" data-placeholder="Select Instrument">
                <option value=""></option>
                <option value="STIS">STIS (Not currently supported)</option>
                <option value="WFC3">WFC3</option>
            </select>
        </div>
    </div>

    <div class="form-group hidden" id="instrument-mode-section">
        <label class="col-md-3 control-label" for="stismode">Instrument Parameters</label>
        <div class="col-md-3" id="STIS">
            <select id="stismode" name="stismode" class="form-control" data-placeholder="Select STIS Mode">
                <option value=""></option>
                <option value="g430">G430</option>
                <option value="g750">G750</option>
            </select>
        </div>

        <div class="col-md-3" id="WFC3">
            <select id="wfc3mode" name="wfc3mode" class="form-control" data-placeholder="Select WFC3 Disperser">
                <option value=""></option>
                <option value="g102">G102</option>
                <option value="g141">G141</option>
            </select>
            <select id="subarray" name="subarray" class="form-control" data-placeholder="Select WFC3 Subarray Size">
                <option value=""></option>
                <option value="GRISM256">GRISM256</option>
                <option value="GRISM512">GRISM512</option>
            </select>
            <select id="nsamp" name="nsamp" class="form-control" data-placeholder="Select WFC3 N_SAMP">
                <option value=""></option>
                <option value="0">Optimal</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
            </select>
            <select id="samp_seq" name="samp_seq" class="form-control" data-placeholder="Select WFC3 SAMP_SEQ">
                <option value=""></option>
                <option value="None">Optimal</option>
                <option value="SPARS5">SPARS5</option>
                <option value="SPARS10">SPARS10</option>
                <option value="SPARS25">SPARS25</option>
            </select>
            <select id="scanDirection" name="scanDirection" class="form-control" data-placeholder="Select WFC3 Scan Direction">
                <option value=""></option>
                <option value="Forward">Forward</option>
                <option value="Round Trip">Round Trip</option>
            </select>
            <select id="schedulability" name="schedulability" class="form-control" data-placeholder="Select WFC3 Schedulability">
                <option value=""></option>
                <option value="30">30 (Small/Medium Programs)</option>
                <option value="100">100 (Large Programs)</option>
            </select>
            <p class="help-block">Choosing 'Optimal' lets the program determine the optimal values.</p>
        </div>
    </div>


    <div class="form-group">
        <label class="col-md-3 control-label" for="ramp">Ramp Effects?</label>
        <div class="col-md-3">

              <input type="checkbox" data-toggle="toggle" id="ramp" name="ramp" class="form-control">

        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" name="submit_form" class="btn btn-success" value="submit">Submit</button>
            {% module xsrf_form_html() %}
        </div>
    </div>
</form>
{% end %}

{% block js %}
<script src="{{ static_url('js/starter.formhst.js') }}"></script>
<script src="{{ static_url('js/select2.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("select").select2({
            theme: "bootstrap",
            width: "100%",
            minimumResultsForSearch: 7
        });

        /* Nice block level radio selection */
        $(".radio-chooser-content").click(function () {
            $(".radio-chooser-item").removeClass("radio-chooser-selected");
            $(this).parent().addClass("radio-chooser-selected");
            switch ( $(this).find("input").attr("id") ) {
                case "UserDefine":
                    $(".resolve-target").addClass("hidden");
                    $(".define-properties").removeClass("hidden");
                    break;
                case "ResolveTarget":
                    $(".resolve-target").removeClass("hidden");
                    $(".define-properties").addClass("hidden");
                    break;
                case "planetModelConstant":
                    $(".upload-planet-section").addClass("hidden");
                    $(".constant-transit-section").removeClass("hidden");
                    $(".select-from-grid").addClass("hidden");
                    break;
                case "planetModelUser":
                    $(".constant-transit-section").addClass("hidden");
                    $(".upload-planet-section").removeClass("hidden");
                    $(".select-from-grid").addClass("hidden");
                    break;
                case "planetModelGrid":
                    $(".constant-transit-section").addClass("hidden");
                    $(".upload-planet-section").addClass("hidden");
                    $(".select-from-grid").removeClass("hidden");
                    break;
                    break;
            }
        });

        /* File Browsing Button */
        $(".niceFileBtn").click(function () {
            $(this).parent().find("input").click().change(function () {
                $(this).parent().find(".btn").css("display", "none");
                $(this).css("display", "block");
            });
        });

        /* Instrument Selection */
        $("#instrument").change(function () {
            $("#instrument-mode-section").removeClass("hidden");
            $("#STIS, #WFC3").addClass("hidden");
            var selopt = $("#instrument").val();
            switch (selopt) {
                case "STIS":
                    $("#STIS").removeClass("hidden");
                    break;
                case "WFC3":
                    $("#WFC3").removeClass("hidden");
                    break;
            }
        });
    });

    function pickStar() {
        var selopt1 = document.getElementById("type").value;
        if (selopt1 == "user") {
            document.getElementById("starFile").style.display = "block";
            document.getElementById("starwunits").style.display = "block";
            document.getElementById("starfunits").style.display = "block";
            document.getElementById("phoenix").style.display = "none";
        }
        if (selopt1 == "phoenix") {
            document.getElementById("starFile").style.display = "none";
            document.getElementById("starwunits").style.display = "none";
            document.getElementById("starfunits").style.display = "none";
            document.getElementById("phoenix").style.display = "block";
        }
        if (selopt1 == "0") {
            document.getElementById("starFile").style.display = "none";
            document.getElementById("starwunits").style.display = "none";
            document.getElementById("starfunits").style.display = "none";
            document.getElementById("phoenix").style.display = "none";
        }
    }
</script>


<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.js"></script>
{% end %}
