{% extends "base.html" %}

{% block title %}Request an estimation of your travel footprint{% endblock %}

{% block hero %}

<div class="jumbotron">
    <h1>{{ content.estimate.hero.title | safe }}</h1>

    {{ content.estimate.hero.description | markdown | safe }}

</div>

{% endblock %}

{#############################################################################}

{# MACROS ####################################################################}

{% macro render_field(field) %}
<dt>
    {{ field.label }}
    {% if not field.flags.optional %}
    <span class="required-asterisk" title="This field is required.">*</span>
    {% endif %}
</dt>
<dd>
    {{ field(title=field.description, class_="form-control", **kwargs) | safe }}

    {% if field.errors -%}

    <ul class="errors text-danger has-error">

    {% for error in field.errors %}
        <li>{{ error }}</li>
    {% endfor %}
    </ul>
    {%- endif %}
</dd>
{% endmacro %}

{% macro render_checkbox(field) %}
{{ field(class="form-check-input") }}
{{ field.label(
    class="form-check-label",
    title=field.description
) }}

{% if field.errors -%}

<p class="text-danger help-block">{{ field.errors[0] | safe }}</p>

{%- endif %}

{% endmacro %}

{#############################################################################}
{# BODY ######################################################################}

{% block body %}
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">

        <form role="form" action="{{ url_for('.estimate') }}" method="post" enctype="multipart/form-data">

            {{ form.hidden_tag() }}

{#            <div class="form-group">#}
{#                {{ render_field(form.email) }}#}
{#                <small class="form-text text-muted">We will never share your email with anyone.</small>#}
{#            </div>#}

            <div class="form-group row">
                <div class="col-md-6">
                {{ render_field(form.first_name) }}

                <small class="form-text text-muted">{{ content.estimate.help.first_name | safe }}</small>

                </div>

                <div class="col-md-6">
                {{ render_field(form.last_name) }}

                <small class="form-text text-muted">{{ content.estimate.help.last_name | safe }}</small>

                </div>

            </div>
            <div class="form-group">
                {{ render_field(form.institution) }}
            </div>

            <div class="row">
                <div class="col-7">
                    <div class="form-group">
                        {{ render_field(form.origin_addresses) }}
                        <small class="form-text text-muted">

                            {{ content.estimate.help.origin_addresses | markdown | safe }}

                        </small>
                    </div>
                </div>
                <div class="col-1">
                    <br>
                    <br>
                    OR
                </div>
                <div class="col-4">
                    <div class="form-group">
                        {{ render_field(form.origin_addresses_file) }}
                        <small class="form-text text-muted">

                            {{ content.estimate.help.origin_addresses_file | markdown | safe }}

                        </small>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-7">
                    <div class="form-group">
                        {{ render_field(form.destination_addresses) }}
                        <small class="form-text text-muted">

                            {{ content.estimate.help.destination_addresses | markdown | safe }}

                        </small>
                    </div>
                </div>
                <div class="col-1">
                    <br>
                    <br>
                    OR
                </div>
                <div class="col-4">
                    <div class="form-group">
                        {{ render_field(form.destination_addresses_file) }}
                        <small class="form-text text-muted">

                            {{ content.estimate.help.destination_addresses_file | markdown | safe }}

                        </small>
                    </div>
                </div>

            </div>

{#            <div class="form-check form-group">#}
{#                {{ render_checkbox(form.compute_optimal_destination) }}#}
{#            </div>#}

{#            <div class="form-check form-group">#}
{#                {{ render_checkbox(form.use_atmosfair_rfi) }}#}
{#                <small class="form-text text-muted">Disabled. Work in Progress. RFI=1.9</small>#}
{#            </div>#}

            <div class="form-group">

                <h6>Emission Models to consider</h6>
                <div class="form-check">
                    {% for model in models %}
                    <div>
                    {{ render_checkbox(form['use_model_'~model.slug]) }}
                    </div>
                    {% endfor %}

                </div>

                <small class="form-text text-muted">
                    We will use a mean of the selected models.
                    &nbsp;
                    Please select at least one.
                    <br>
                    The meaning of <acronym title="Radiative Forcing Index">RFI</acronym>
                    is detailed
                    <a href="{{ url_for('.home') }}#rfi">here</a>
                    .
                </small>

            </div>

            <div class="form-group">

                {{ render_field(form.use_train_below_km) }}

                <small class="form-text text-muted">
                    {{ content.estimate.help.use_train_below_km | safe }}
                </small>

            </div>

            <div class="form-group">

                {{ render_field(form.comment) }}
            </div>

            <hr>

            <div class="form-group">
                {{ render_field(form.run_name) }}
                <small class="form-text text-muted">{{ content.estimate.help.run_name | safe }}</small>
            </div>

            <div class="form-group">
                <dt>
                    {{ form.captcha.label }}
                    <span class="required-asterisk" title="This field is required.">*</span>
                </dt>
                <dd>
                    {{ captcha() }}
                    <br><br>

                    {{ form.captcha(
                        title=form.captcha.description,
                        class_="form-control",
                        placeholder="Please write the numbers you see in the image above."
                    ) | safe }}

                    {% if form.captcha.errors -%}
                    <ul class="errors text-danger has-error">
                    {% for error in form.captcha.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                    </ul>
                    {%- endif %}
                </dd>
            </div>

            <button type="submit" class="btn btn-primary">
                Submit a Request
            </button>
        </form>

    </div>

    <div class="col-md-2"></div>
</div>

{% endblock %}

{% block js %}
<script type="text/javascript">

// Multiline placeholders for textarea shim (eg: iPad)
// https://github.com/EmilMoe/multiline-placeholder

// This breaks accessibility and form input retention,
// so we're trying to only enable it for the iDiot platforms.

$(function() {

    var isHell = navigator.platform.match(/(iPhone|iP[ao]d|Mac|Pike)/i);

    if (isHell) {

        var style = $('<style>textarea[data-placeholder].active { color: #666; }</style>')
        $('html > head').append(style);

        $('textarea[placeholder]').each(function (index) {
            var text = $(this).attr('placeholder');
            var match = /\r|\n/.exec(text);

            if (!match) return;

            $(this).attr('placeholder', '');
            $(this).attr('data-placeholder', text);
            $(this).addClass('active');
            $(this).val(text);
        });

        $('textarea[data-placeholder]').on('focus', function () {
            if ($(this).attr('data-placeholder') === $(this).val()) {
                $(this).attr('data-placeholder', $(this).val());
                $(this).val('');
                $(this).removeClass('active');
            }
        });

        $('textarea[data-placeholder]').on('blur', function () {
            if ($(this).val() === '') {
                var text = $(this).attr('data-placeholder');
                $(this).val(text);
                $(this).addClass('active');
            }
        });
    }

});

</script>
{% endblock %}