{% extends "layout.html" %}
{% block head %}
{{ super() }}
    <style type="text/css">
    .cursor {
        display: inline-block;
        background: #dfdfdf;
        margin-left: 1px;
        margin-top: 2px;
        vertical-align: sub;
        height: 16px;
        animation: blink 2s linear 0s infinite;
    }
    @keyframes blink {
        0% { background: #fff }
        49% { background: #fff }
        50% { background: #dfdfdf }
        99% { background: #dfdfdf }
        100% { background: #fff }
    }
    </style>
{%- endblock %}
{% block script %}
{{ super() }}
<script type="text/javascript">
$(function() {
    var evt;
    function validate() {
        evt = new EventSource("{{ url_for('json_url_validator') }}");
        evt.onmessage = function(e) {
            $('#status').append(e.data+'\n');
            var pre=$("#status").parent();
            pre.stop();
            pre.animate({
                'scrollTop': pre[0].scrollHeight
            }, 500);
        }
        evt.onerror = function(e) {
            $('#status').append('<span style="color: red;">/!\\ Error with the validation API, connection was closed. Retry in a few seconds\n</span>')
            evt.close();
            setTimeout(function() { $('#retry').removeAttr('disabled') }, 5000);
        }
        evt.addEventListener('control', function(e) {
            var msg=$.parseJSON(e.data);
            if(!!msg.passed)
                $('input[type="submit"]').removeAttr('disabled');
                evt.close();

            if(!!msg.closed) {
                evt.close();
                setTimeout(function() { $('#retry').removeAttr('disabled') }, 5000);
            }
        });
    }
    $('#retry').click(function() {
        $("#status").html('');
        validate();
        $('#retry').attr('disabled', 'disabled')
        return false;
    });
    validate();
});
</script>
{%- endblock %}
{% block container %}
<div class="row">
  <div class="span11 well">
    <form method="post" action="{{ url_for('create_project_json_confirm') }}" class="form-horizontal">
      <fieldset>
        <legend>{{ _("Validating the JSON URL") }}</legend>
        <pre style="height: 500px; background-color: white; overflow-x: auto;">
<div style="line-height: normal"> _______ _______ ______  _______ 
|_______|_______|_____ \|  ___  \
 ______  ______  _    \ | |   \ |   ____  _____ 
|   ___)|   ___)| |   | | |   | |  |    \| __  |
|  |    |  |    | |__/ /| |   | |  |  |  | __ -|
|__|    |__|    |_____/ |_|   |_|  |____/|_____|
</div>
<div id="status"></div><div class="cursor"> </div></pre>
        <div class="form-actions" style="text-align: right;">
          <button id="retry" class="btn" disabled="disabled">{{ _("Retry") }}</button>
          <input type="submit" disabled="disabled" class="btn btn-primary" value="{{ _("Confirm") }}" />
        </div>
      </fieldset>
  </div>
</div>
{% endblock %}