{% extends 'base.html' %}
{% block content %}
<div class="container text-left">
    <h1>SFG Position Calculator</h1>

    <form action="position">
        <div class="row row-cols-6">
            <div class="col"><label class="form-label">Source isotope:</label></div>

            <div class="col">
                <select name="isotope1" class="form-select" size="1">
                    {% for i in isotopes %}
                        <option value="{{ i.0 }}">{{ i.1 }}</option>
                    {% endfor %}
                </select>
            </div>

        </div>
        <div class="row row-cols-6">
            <div class="col"><label class="form-label">Source frequency in MHz:</label></div>
            <div class="col">
                <input type="number" name="freq" class="form-control" step="any" value=100
                                    placeholder="Larmor frequency in MHz">
            </div>
        </div>
        <div class="row row-cols-6">
            <label class="form-label">Destination isotope:</label>
            <div class="col">
                <select name="isotope2" class="form-select" size="1">
                {% for i in isotopes %}
                    <option value="{{ i.0 }}">{{ i.1 }}</option>
                {% endfor %}
                </select>
            </div>

        </div>
        <div class="row row-cols-6">
            <label class="form-label">Probe length:</label>
            <div class="col">
                <input type="number" name="probe_length" class="form-control" step="any"
                                    placeholder="Probe length in mm">
            </div>
        </div>
            <div class="row row-cols-6">
            <label class="form-label">Magnet</label>
            <div class="col">
                <select name="magnet" class="form-select" size="1">
                        <option value="oxford_profile.dat">Oxford</option>
                        <option value="magnex_profile.dat">Magnex</option>
                </select>
            </div>
        </div>
        <div class="row row-cols-6">
            <label class="form-label">Gradient in T/m:<br>(assuming &#x2300;5mm)</label>
            <div class="col"><input type="number" name="gradient" class="form-control" step="any"
                                    placeholder="Gradient in T/m"></div>
            <div class="col">
                <button type="submit" name="gradient_search" class="btn btn-primary btn-sm">Get position</button>
            </div>
        </div>
    </form>
</div>
<div>
    {{ ans }}
</div>

{% endblock %}