{% extends 'projects/stage_base.html' %}
{% load render_table from django_tables2 %}
{% load sekizai_tags staticfiles %}

{% block content %}

    <div class="row">
        <h1 style="margin-bottom:30px;" class="col-lg-12">Stage {{ object.name }}
            <span class="pull-right">
                <a class="btn btn-primary" href="{% url 'projects_stage_update' object.project.pk object.pk %}">Edit Stage</a>
                <a class="btn btn-danger" href="{% url 'projects_stage_delete' object.project.pk object.pk %}">Delete Stage</a>
            </span>
        </h1>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>
                        Hosts
                        <i class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-delay="{'show': 300, 'hide': 0 }"
                            data-original-title="These are the hosts that will be deployed to when running tasks for this stage."></i>
                    </h4>
                </div>

                <div class="panel-body">
                    {% render_table hosts %}
                </div>

                <div class="panel-footer">
                    <div class="row">
                        <div class="col-md-8">
                            <select name="stage_host" id="stage_host" class="form-control input-sm" style="width: 50%; display: inline-block;">
                                <option value="">Select Host</option>
                                {% for host in available_hosts %}
                                    <option value="{{ host.pk }}">{{ host.name }}</option>
                                {% endfor %}
                            </select>

                            <a class="btn btn-default btn-sm js-add-host" href="{% url 'projects_stage_maphost' object.project.pk object.pk 'host_id' %}">
                                <i class="glyphicon glyphicon-plus-sign"></i>
                                Add Stage Host
                            </a>

                            <span id="select_host_msg" class="text-danger" style="display: none;">Please Select Host</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="well well-sm" id="task_well">
                <div class="text-center" style="padding:6px 0;">
                    Finding tasks... &#160;&#160;<img src="{% static 'images/ajax-loader.gif' %}"/>
                </div>
            </div>
        </div>
    </div>

    {% addtoblock "js" %}
        <script>
            (function($){
                $(function(){
                    $('#task_well').load("{% url 'projects_stage_tasks_ajax' object.project_id object.id %}",
                        function(){
                            $('[data-toggle=tooltip]').tooltip();
                            $('#all_tasks_dropdown').change(function(){
                                document.location = $(this).val();
                            });
                        }
                    );

                    $('.js-add-host').click(function(event){
                        event.preventDefault();

                        var link = $(this)
                        , host = $('#stage_host').val();

                        if(host===''){
                            $('#select_host_msg').show();
                            return false;
                        }else{
                            $('#select_host_msg').hide();
                        }

                        location.href = link.attr('href').replace('host_id', host);
                    });
                });
            }(jQuery));
        </script>
    {% endaddtoblock %}

{% endblock content %}