{% 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>
    <p>{{ content.estimate.hero.description | markdown | safe }}</p>
</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 | 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 | 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 | 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 | 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>

            <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
$(function() {
  var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

  // Disable for chrome which already supports multiline
  if (! ((!!window.chrome) && !isOpera)) {
    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 %}