{% extends "allianceauth/base.html" %}

{% load bootstrap %}
{% load i18n %}
{% load evelinks %}

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

{% block content %}
    <div class="clearfix">
        <h1 class="page-header text-center">
            {% translate "View Application" %}
        </h1>

        {% 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 class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title">{% translate "Applicant" %}</div>
            </div>

            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="text-center">{% translate "User" %}</th>
                            <th class="text-center">{% translate "Main Character" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="text-center">{{ app.user }}</td>
                            <td class="text-center">{{ app.main_character }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title">{% translate "Characters" %}</div>
            </div>

            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>{% translate "Name" %}</th>
                            <th>{% translate "Corp" %}</th>
                            <th>{% translate "Alliance" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for char in app.characters %}
                            <tr>
                                <td class="valign-middle">
                                    <img class="ra-avatar img-rounded" src="{{ char.portrait_url_32 }}" alt="{{ char.character_name }}" style="margin-right: 0.25rem;">
                                    {{ char.character_name }}
                                </td>
                                <td class="valign-middle">
                                    <img class="ra-avatar img-rounded" src="{{ char.corporation_id|corporation_logo_url:32 }}" alt="{{ char.corporation_name }}" style="margin-right: 0.25rem;">
                                    {{ char.corporation_name }}
                                </td>
                                <td class="valign-middle">
                                    {% if char.alliance_name %}
                                        <img class="ra-avatar img-rounded" src="{{ char.alliance_id|alliance_logo_url:32 }}" alt="{{ char.alliance_name }}" style="margin-right: 0.25rem;">
                                        {{ char.alliance_name }}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        {% for response in responses %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">{{ response.question.title }}</div>
                </div>
                <div class="panel-body">{{ response.answer|linebreaksbr }}</div>
            </div>
        {% endfor %}

        {% if buttons %}
            {% if perms.auth.human_resources %}
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-title">{% translate "Actions" %}</div>
                    </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 class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingThree">
                            <div 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>
                            </div>
                        </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 clearfix">
                                                <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>
                                        </div>

                                        <div class="panel-body">
                                            {{ comment.text|linebreaks }}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </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 %}
