{% extends "allianceauth/base.html" %}
{% load bootstrap %}
{% load i18n %}

{% block page_title %}{% translate "View Application" %}{% endblock page_title %}
{% block extra_css %}{% endblock extra_css %}

{% block content %}
    <div class="col-lg-12">
        <h1 class="page-header text-center">{% translate "View Application" %}</h1>
        <div class="container-fluid">
            <div class="col-md-6 col-md-offset-3">
                <div class="row">
                    {% if app.approved %}
                        <div class="alert alert-success text-center">{% translate "Approved" %}</div>
                    {% elif app.approved == False %}
                        <div class="alert alert-danger text-center">{% translate "Denied" %}</div>
                    {% else %}
                        <div class="alert alert-warning text-center">{% translate "Pending" %}</div>
                    {% endif %}
                    {% if app.reviewer_str %}
                        <div class="alert alert-info text-center">{% translate "Reviewer:" %} {{ app.reviewer_str }}</div>
                    {% endif %}
                </div>
                <div class="row">
                    <div class="panel panel-info">
                        <div class="panel-heading">{% translate "Applicant" %}</div>
                        <table class="table">
                            <tr>
                                <th class="text-center">{% translate "User" %}</th>
                                <th class="text-center">{% translate "Main Character" %}</th>
                            </tr>
                            <tr>
                                <td class="text-center">{{ app.user }}</td>
                                <td class="text-center">{{ app.main_character }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">{% translate "Characters" %}</div>
                        <table class="table">
                            <tr>
                                <th class="text-center"></th>
                                <th class="text-center">{% translate "Name" %}</th>
                                <th class="text-center">{% translate "Corp" %}</th>
                                <th class="text-center">{% translate "Alliance" %}</th>
                            </tr>
                            {% for char in app.characters %}
                                <tr>
                                    <td class="text-center">
                                        <img class="ra-avatar img-responsive img-circle" src="{{ char.portrait_url_32 }}" alt="{{ char.character_name }}">
                                    </td>
                                    <td class="text-center">{{ char.character_name }}</td>
                                    <td class="text-center">{{ char.corporation_name }}</td>
                                    <td class="text-center">{{ char.alliance_name }}</td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
                <div class="row">
                    {% for response in responses %}
                        <div class="panel panel-default">
                            <div class="panel-heading">{{ response.question.title }}</div>
                            <div class="alert">{{ response.answer|linebreaksbr }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% if buttons %}
                    {% if perms.auth.human_resources %}
                        <div class="row">
                            <div class="panel panel-primary">
                                <div class="panel-heading">{% translate "Actions" %}</div>
                                <div class="panel-body text-center">
                                    {% if app.approved == None %}
                                        {% if app.reviewer == user %}
                                            {% if perms.hrapplications.approve_application %}
                                                <a href="{% url 'hrapplications:approve' app.id %}" class="btn btn-success">{% translate "Approve" %}</a>
                                            {% endif %}
                                            {% if perms.hrapplications.reject_application %}
                                                <a href="{% url 'hrapplications:reject' app.id %}" class="btn btn-danger">{% translate "Reject" %}</a>
                                            {% endif %}
                                            {% if perms.hrapplications.delete_application %}
                                                <a href="{% url 'hrapplications:remove' app.id %}" class="btn btn-danger">{% translate "Delete" %}</a>
                                            {% endif %}
                                        {% elif not app.reviewer %}
                                            <a href="{% url 'hrapplications:mark_in_progress' app.id %}" class="btn btn-warning">{% translate "Mark in Progress" %}</a>
                                        {% endif %}
                                    {% endif %}
                                    {% if perms.hrapplications.add_applicationcomment %}
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">{% translate "Comment" %}</button>
                                    {% endif %}
                                </div>
                            </div>
                        </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">
                                            {% translate 'Comments' %} ({{ comments.count }})
                                        </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">
                                                        <div class="pull-right">{{ comment.created }}</div>
                                                        <div class="pull-left">{% if comment.user.profile.main_character %}{{ comment.user.profile.main_character }}{% else %}{{ comment.user }}{% endif %}</div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                                <div class="panel-body">{{ comment.text|linebreaks }}</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">{% translate "Close" %}</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">{% translate "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">{% translate "Add Comment" %}</button>
                        </form>
                    </div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}