{% extends "public/base.html" %}
{% load staticfiles %}
{% load bootstrap %}
{% block title %}Alliance Auth - View Application{% endblock %}
{% block page_title %}View Application{% endblock page_title %}
{% block extra_css %}{% endblock extra_css %}

{% block content %}
    <div class="col-lg-12">
        <h1 class="page-header text-center">View Application</h1>
        <div class="container-fluid">
            <div class="col-md-4 col-md-offset-4">
                <div class="row">
                    {% if app.approved %}
                        <div class="alert alert-success">Approved</div>
                    {% elif app.approved == False %}
                        <div class="alert alert-danger">Denied</div>
                    {% else %}
                        <div class="alert alert-warning">Pending</div>
                    {% endif %}
                    {% if app.reviewer_str %}
                        <div class="alert alert-info">Reviewer: {{ app.reviewer_str }}</div>
                    {% endif %}
                    {% for response in responses %}
                        <div class="panel panel-default">
                            <div class="panel-heading">{{ response.question.title }}</div>
                            <div class="alert">{{ response.answer }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% if buttons %}
                    {% if perms.auth.human_resources %}
                        <div class="panel panel-primary">
                            <div class="panel-heading">Actions</div>
                            {% if app.approved == None %}
                                {% if app.reviewer == user %}
                                    {% if perms.hrapplications.approve_application %}
                                        <a href="/hr_application_approve/{{ app.id }}" class="btn btn-success">Approve</a>
                                    {% endif %}
                                    {% if perms.hrapplications.reject_application %}
                                        <a href="/hr_application_reject/{{ app.id }}" class="btn btn-danger">Reject</a>
                                    {% endif %}
                                    {% if perms.hrapplications.delete_application %}
                                        <a href="/hr_application_remove/{{ app.id }}" class="btn btn-danger">Delete</a>
                                    {% endif %}
                                {% elif not app.reviewer %}
                                    <a href="/hr_mark_in_progress/{{ app.id }}" class="btn btn-warning">Mark in Progress</a>
                                {% endif %}
                            {% endif %}
                            {% if perms.hrapplications.add_applicationcomment %}
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Comment</button>
                            {% endif %}
                            {% if perms.hrapplications.view_apis %}
                                {% for api in apis %}
                                    <a href="{{ JACK_KNIFE_URL }}?usid={{ api.api_id}}&apik={{ api.api_key }}" class="btn btn-info">API {{ api.api_id }}</a>
                                {% endfor %}
                            {% endif %}
                        </div>
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingThree">
                                    <h4 class="panel-title">
                                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                            href="#collapseThree" aria-expanded="false"
                                            aria-controls="collapseThree">
                                            Comments - {{ comments|length }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"
                                    aria-labelledby="headingThree">
                                    <div class="panel-body">
                                        {% for comment in comments %}
                                            <div class="panel panel-default">
                                                <div class="panel-heading" role="tab" id="">
                                                    <div class="panel-title">{{comment.created}} - {{ comment.user }}</div>
                                                </div>
                                                <div class="panel-body">{{ comment.text }}</div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
{% if perms.hrapplications.add_applicationcomment %}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Add Comment</h4>
                </div>
                <div class="modal-body">
                    <form class="form-signin" role="form" action="" method="POST">
                        {% csrf_token %}
                        {{ comment_form|bootstrap }}
                        <br/>
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Add Comment</button>
                    </form>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}