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

{% 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>
    {% 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
) }}
{% endmacro %}

{% 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">
            {{ 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">Fill these to say hello.</small>

                </div>

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

                <small class="form-text text-muted">We will never share your data with anyone.</small>

                </div>

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

                <small class="form-text text-muted">
                    Use <code>en_US</code> city and country names, without diacritics. The comma matters.
                    <br>
                    These usually are the addresses of your participants.
                </small>

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

                <small class="form-text text-muted">
                    Provide multiple destinations to compare them.
                    <br>
                    These usually are the possible locations for an event.
                </small>

            </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">
                {{ 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 %}