{% extends 'base.html' %}
{% load render_table from django_tables2 %}
{% load sekizai_tags %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><a href="{% url 'projects_project_list' %}">Projects</a></li>
        <li><a href="{% url 'projects_project_view' object.project.pk %}">{{ object.project.name }}</a></li>
        <li><a href="{% url 'projects_project_view' object.project.pk %}">Stages</a></li>
        <li class="active">{{ object.name }}</li>
    </ol>
{% endblock breadcrumb %}

{% 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-7">
            <div class="well well-sm">
                <a href="{% url 'projects_stage_update' object.project.pk object.pk %}" class="btn btn-primary btn-sm">Update</a>
            </div>
        </div>

        <div class="col-md-5">
            <div class="well well-sm">

                <div class="list-group">
                    {% for task in frequent_tasks_run %}
                        <a href="{% url 'projects_deployment_create' object.pk task.name %}" class="list-group-item">
                            <span class="badge">{{ task.times_used }}</span>
                            {{ task.name }}
                            {% if task.description %}
                                <i class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-delay="{'show': 300, 'hide': 0 }"
                                data-original-title="{{ task.description }}"></i>
                            {% endif %}
                        </a>
                    {% empty %}
                        <div class="list-group-item">
                            <span class="badge">0</span>
                            No frequent tasks yet
                        </div>
                    {% endfor %}
                </div>

                <div>
                    <select class="form-control" id="all_tasks_dropdown">
                        <option value="">All Tasks</option>
                        {% for task_name in all_tasks %}
                            <option value="{% url 'projects_deployment_create' object.pk task_name %}">{{ task_name }}</option>
                        {% endfor %}
                    </select>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <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">
                            <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>

                            <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>

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

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>
                        Stage Configuration
                        <i class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-delay="{'show': 300, 'hide': 0 }"
                            data-original-title="Configurations added here will be added to fab's env variable and will override whatever is in the project configuration."></i>
                    </h4>
                </div>

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

                <div class="panel-footer">
                    <a class="btn btn-default btn-sm" href="{% url 'projects_configuration_stage_create' object.project.pk object.pk %}">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                        Add Stage Configuration
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h4>
                        Recent Deployments
                        <i class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-delay="{ 'show': 300, 'hide': 0 }"
                           data-original-title="See what was shipped out when, and the status of each attempt."></i>
                    </h4>
                </div>

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

            </div>
        </div>
    </div>

    {% addtoblock "js" %}
        <script>
            (function($){
                $(function(){
                    $('#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 %}