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

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><a href="{% url 'projects_project_list' %}">Projects</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">Project {{ object.name }}
            <span class="pull-right">
                <a class="btn btn-primary" href="{% url 'projects_project_update' object.pk %}">Edit Project</a>
                <a class="btn btn-danger" href="{% url 'projects_project_delete' object.pk %}">Delete Project</a>
            </span>
        </h1>
    </div>

    <div class="row">
        <div class="col-md-7">
            <div class="well well-sm">
                <div>
                    Description: {{ object.description }}
                </div>
                <div>Project Type: {{ object.type }}</div>
                <div>Deployments: {{ object.get_deployment_count }}</div>
                <div></div>
            </div>
        </div>

        <div class="col-md-5">
            <div class="well well-sm">
                <div class="list-group">
                    {% for stage in stages %}
                        <a href="{% url 'projects_stage_view' object.pk stage.pk %}" class="list-group-item">
                            <span class="badge" data-toggle="tooltip" data-delay="{ 'show': 300, 'hide': 0 }" data-original-title="Number of configurations">{{ stage.stage_configurations.count }}</span>
                            {{ stage.name }}
                        </a>
                    {% empty %}
                        <div class="list-group-item">No stage configured yet</div>
                    {% endfor %}
                </div>

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

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>
                        Project 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"></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_create' object.pk %}">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                        Add Configuration
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>
                        Stages
                        <i class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-delay="{ 'show': 300, 'hide': 0 }"
                           data-original-title="Stages allow you to configure hosts and custom configurations. You will deploy to a stage."></i>
                    </h4>
                </div>

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

                <div class="panel-footer">
                    <a class="btn btn-default btn-sm" href="{% url 'projects_stage_create' object.pk %}">
                        <i class="glyphicon glyphicon-plus-sign"></i>
                        Add Stage
                    </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>

{% endblock content %}