{% extends "layout.html" %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('.static', filename='css/execute.css') }}" type="text/css" media="screen"/>

    {% if execute_progress %}
    <script type="application/javascript">
        function update_progress() {

            var progress = $('#progress');
            var timer;

            $.ajaxSetup({ cache: false });
            $.getJSON('/execute/progress.json', function(data) {
                $.each(data.items, function(key, value) {
                    if (value == "EOF") {
                        //TODO: This actually doesn't end the refresh loop, as timeout just gets set again below
                        clearTimeout(timer);
                    } else {
                        progress.append('<li><pre>' + value + '</pre></li>');
                        progress.attr({ scrollTop: progress.attr("scrollHeight") });
                    }
                });
            });
            timer = window.setTimeout('update_progress()', 1000);
        }
        $(document).ready(update_progress);
    </script>
    {% endif %}
{% endblock %}

{% block main %}
    <div>
        <form action="{{ url_for('.index') }}" method="post" class="simple" style="float: left">
            <fieldset style="width:26em">
                <legend>Execute FlexGet</legend>
                <div>
                    <label for="options">Options</label>
                    <input type="text" id="options" name="options" value="{{ options }}" size="50">
                </div>
                <div class="buttons">
                    <button type="submit">Start Execution</button>
                </div>
            </fieldset>
        </form>

        <div class="help" style="float: right;">
            <p>
                FlexGet has strong roots in Command Line Interface. The web interface is in early stages and most
                of the features are not yet available trough it. Manual execution provides browser based approach
                to access Command Line features.
            </p>
        </div>

        <div style="clear: both;"></div>
    </div>

    <div>
        <ul id="progress">
            {% if progress %}
            {% for item in progress %}
            <li><pre>{{ item }}</pre></li>
            {% endfor %}
            {% endif %}
        </ul>
    </div>
{% endblock %}
