{% extends "base.html" %}
{% load i18n static review_extras %}

{% block head %}
    {{ vote_form.media }}
    <link rel="stylesheet" href="{% review_static 'tcms_review/css/review.css' %}">
{% endblock %}

{% block title %}{% blocktrans with pk=review_request.pk title=review_request.title %}Review #{{ pk }}: {{ title }}{% endblocktrans %}{% endblock %}
{% block page_id %}page-review-get{% endblock %}

{% block contents %}
<div class="container-fluid container-cards-pf"
     data-review-pk="{{ review_request.pk }}">

    <ol class="breadcrumb">
        <li><a href="{% url 'core-views-index' %}">{% trans "Dashboard" %}</a></li>
        <li><a href="{% url 'review-list' %}">{% trans "Review requests" %}</a></li>
        <li class="active">#{{ review_request.pk }}</li>
    </ol>

    {% if is_locked %}
    <div class="alert alert-success" role="alert" style="margin-bottom:16px;">
        <i class="pficon pficon-ok" aria-hidden="true"></i>
        <strong>{% trans "Approved and locked." %}</strong>
        {% trans "This review request has been approved and can no longer be modified." %}
    </div>
    {% endif %}

    <div class="card-pf">
        <div class="card-pf-heading">
            <h2 class="card-pf-title">
                <span aria-label="{% trans 'Review request number' %}">#{{ review_request.pk }}</span>
                — {{ review_request.title }}
                {% state_badge review_request.state review_request.get_state_display %}
            </h2>
            <p class="card-pf-subtitle">
                {% blocktrans with requester=review_request.requester.username created=review_request.created_at|date:"Y-m-d" %}Requested by {{ requester }} on {{ created }}{% endblocktrans %}
                {% if review_request.due_date %}
                    · <i class="fa fa-clock-o" aria-hidden="true"></i> {% trans "Due" %}: {{ review_request.due_date|date:"Y-m-d H:i" }}
                {% endif %}
                · <a href="{% url 'review-report' review_request.pk %}" class="small">
                    <i class="fa fa-bar-chart" aria-hidden="true"></i> {% trans "View report" %}
                </a>
            </p>
        </div>

        <div class="card-pf-body">
            <div class="review-aggregate" role="group" aria-label="{% trans 'Review metrics' %}">
                <div class="aggregate-status-pf">
                    <div class="aggregate-status-pf-title">{% trans "Reviewers" %}</div>
                    <div class="aggregate-status-pf-count">{{ review_request.reviewers.count }}</div>
                </div>
                <div class="aggregate-status-pf">
                    <div class="aggregate-status-pf-title">{% trans "Votes cast" %}</div>
                    <div class="aggregate-status-pf-count">{{ metrics.votes.approved|add:metrics.votes.rejected|add:metrics.votes.needs_changes }}</div>
                    <div class="aggregate-status-pf-notification">{{ metrics.participation|floatformat:0 }}% {% trans "participation" %}</div>
                </div>
                <div class="aggregate-status-pf">
                    <div class="aggregate-status-pf-title">{% trans "Approvals" %}</div>
                    <div class="aggregate-status-pf-count text-success">{{ metrics.votes.approved }}</div>
                </div>
                <div class="aggregate-status-pf">
                    <div class="aggregate-status-pf-title">{% trans "Rejections" %}</div>
                    <div class="aggregate-status-pf-count text-danger">{{ metrics.votes.rejected }}</div>
                </div>
                <div class="aggregate-status-pf">
                    <div class="aggregate-status-pf-title">{% trans "Changes requested" %}</div>
                    <div class="aggregate-status-pf-count text-warning">{{ metrics.votes.needs_changes }}</div>
                </div>
            </div>

            {% if review_request.description %}
                <p>{{ review_request.description|linebreaksbr }}</p>
            {% endif %}
        </div>
    </div>

    <div class="card-pf">
        <div class="card-pf-heading"><h3 class="card-pf-title">{% trans "Reviewers & votes" %}</h3></div>
        <div class="card-pf-body">
            {% if review_request.reviewers.all %}
            <div class="table-responsive">
                <table class="table" aria-label="{% trans 'Reviewers and their votes' %}">
                    <thead>
                        <tr>
                            <th>{% trans "Reviewer" %}</th>
                            <th>{% trans "Decision" %}</th>
                            <th>{% trans "Comment" %}</th>
                            <th>{% trans "Voted at" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for reviewer in review_request.reviewers.all %}
                            {% with this_vote=votes|vote_for:reviewer %}
                            <tr>
                                <td>{{ reviewer.username }}</td>
                                {% if this_vote %}
                                    <td>{% decision_badge this_vote.decision this_vote.get_decision_display %}</td>
                                    <td>{{ this_vote.comment|default:"—" }}</td>
                                    <td>{{ this_vote.voted_at|date:"Y-m-d H:i" }}</td>
                                {% else %}
                                    <td><span class="label label-default">{% trans "Pending" %}</span></td>
                                    <td colspan="2" class="text-muted">{% trans "Awaiting vote" %}</td>
                                {% endif %}
                            </tr>
                            {% endwith %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="review-blank-slate">
                <i class="pficon pficon-user" aria-hidden="true"></i>
                <h3>{% trans "No reviewers assigned" %}</h3>
                <p>{% trans "Edit this request to add reviewers." %}</p>
                {% if is_owner %}
                <a class="btn btn-default" href="{% url 'review-edit' review_request.pk %}">
                    <i class="fa fa-pencil" aria-hidden="true"></i> {% trans "Edit request" %}
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <div class="card-pf">
        <div class="card-pf-heading"><h3 class="card-pf-title">{% trans "Cases under review" %}</h3></div>
        <div class="card-pf-body">
            {% if review_request.state != "cancelled" and not is_locked %}
            <div id="review-add-case-form" data-review-pk="{{ review_request.pk }}"
                 style="margin-bottom:16px;">

                <ul class="nav nav-tabs" role="tablist" style="margin-bottom:12px;">
                    <li role="presentation" class="active">
                        <a href="#review-tab-search" data-toggle="tab" role="tab">
                            <i class="fa fa-search" aria-hidden="true"></i> {% trans "Search" %}
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#review-tab-case-browser" data-toggle="tab" role="tab">
                            <i class="fa fa-list" aria-hidden="true"></i> {% trans "TestCase browser" %}
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#review-tab-plan-browser" data-toggle="tab" role="tab">
                            <i class="fa fa-sitemap" aria-hidden="true"></i> {% trans "TestPlan browser" %}
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="review-tab-search" role="tabpanel">
                        <div class="form-group" style="position:relative;">
                            <input type="text" id="review-add-case-input" class="form-control"
                                   placeholder="{% trans 'Search test case by ID or summary...' %}"
                                   autocomplete="off" style="width:360px;">
                            <ul class="dropdown-menu review-add-case-results"
                                style="display:none; position:absolute; z-index:1060; min-width:360px;"></ul>
                        </div>
                    </div>

                    <div class="tab-pane" id="review-tab-case-browser" role="tabpanel">
                        <div class="form-inline" style="margin-bottom:8px;">
                            <div class="form-group">
                                <label class="sr-only" for="review-case-browser-filter">{% trans "Filter" %}</label>
                                <input type="text" id="review-case-browser-filter" class="form-control"
                                       placeholder="{% trans 'Filter by summary...' %}" style="width:300px;">
                            </div>
                            <button type="button" id="review-case-browser-load" class="btn btn-default">
                                <i class="fa fa-refresh" aria-hidden="true"></i> {% trans "Load" %}
                            </button>
                        </div>
                        <div class="table-responsive" style="max-height:300px; overflow-y:auto;">
                            <table class="table table-hover table-condensed" id="review-case-browser-table">
                                <thead><tr>
                                    <th style="width:40px;"></th>
                                    <th style="width:60px;">#</th>
                                    <th>{% trans "Summary" %}</th>
                                    <th style="width:100px;">{% trans "Status" %}</th>
                                </tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-pane" id="review-tab-plan-browser" role="tabpanel">
                        <div class="form-inline" style="margin-bottom:8px;">
                            <div class="form-group">
                                <label class="sr-only" for="review-plan-browser-filter">{% trans "Filter" %}</label>
                                <input type="text" id="review-plan-browser-filter" class="form-control"
                                       placeholder="{% trans 'Filter by plan name...' %}" style="width:300px;">
                            </div>
                            <button type="button" id="review-plan-browser-load" class="btn btn-default">
                                <i class="fa fa-refresh" aria-hidden="true"></i> {% trans "Load" %}
                            </button>
                        </div>
                        <div class="table-responsive" style="max-height:300px; overflow-y:auto;">
                            <table class="table table-hover table-condensed" id="review-plan-browser-table">
                                <thead><tr>
                                    <th style="width:60px;">#</th>
                                    <th>{% trans "Plan name" %}</th>
                                    <th style="width:80px;">{% trans "Cases" %}</th>
                                    <th style="width:80px;"></th>
                                </tr></thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            {% if items %}
            <div class="table-responsive">
                <table class="table review-cases-table" aria-label="{% trans 'Cases under review' %}">
                    <thead>
                        <tr>
                            <th style="width: 70px;">#</th>
                            <th>{% trans "Summary" %}</th>
                            <th style="width: 160px;">{% trans "Decision" %}</th>
                            <th>{% trans "Comment" %}</th>
                            <th style="width: 280px;">{% trans "Actions" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in items %}
                        <tr data-item-pk="{{ item.pk }}">
                            <td>{{ item.case.pk }}</td>
                            <td>{{ item.case.summary }}</td>
                            <td>{% decision_badge item.decision item.get_decision_display %}</td>
                            <td>
                                {% if item.comment %}
                                    <span class="review-item-comment text-muted">{{ item.comment|truncatechars:140 }}</span>
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td class="review-item-actions">
                                {% if is_locked %}
                                <span class="text-muted">{% trans "Locked" %}</span>
                                {% else %}
                                <form method="post" action="{% url 'review-item-decision' item.pk %}" class="form-inline" style="display:inline-block;">
                                    {% csrf_token %}
                                    <button name="decision" value="approved" class="btn btn-xs btn-success"
                                            aria-label="{% trans 'Approve case' %}"
                                            title="{% trans 'Approve without comment' %}">
                                        <i class="pficon pficon-ok" aria-hidden="true"></i>
                                    </button>
                                    <button name="decision" value="needs_changes" class="btn btn-xs btn-warning"
                                            aria-label="{% trans 'Request changes on case' %}"
                                            title="{% trans 'Request changes without comment' %}">
                                        <i class="pficon pficon-warning-triangle-o" aria-hidden="true"></i>
                                    </button>
                                    <button name="decision" value="rejected" class="btn btn-xs btn-danger"
                                            aria-label="{% trans 'Reject case' %}"
                                            title="{% trans 'Reject without comment' %}">
                                        <i class="pficon pficon-error-circle-o" aria-hidden="true"></i>
                                    </button>
                                </form>
                                <button type="button" class="btn btn-xs btn-default review-item-decide-with-comment"
                                        data-item-pk="{{ item.pk }}"
                                        data-item-case-id="{{ item.case.pk }}"
                                        data-item-case-summary="{{ item.case.summary }}"
                                        data-item-decision="{{ item.decision }}"
                                        data-item-comment="{{ item.comment|default:'' }}"
                                        data-url="{% url 'review-item-decision' item.pk %}"
                                        aria-label="{% trans 'Decide with a comment' %}"
                                        title="{% trans 'Decide with a comment' %}">
                                    <i class="fa fa-commenting-o" aria-hidden="true"></i>
                                </button>
                                {% if item.decision == "needs_changes" or item.decision == "rejected" %}
                                <form method="post" action="{% url 'review-item-resubmit' item.pk %}" class="form-inline" style="display:inline-block; margin-left:4px;"
                                      data-confirm="{% trans 'Resubmit this case for re-review? The reviewer will be notified and the case status will be reset.' %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-xs btn-info"
                                            aria-label="{% trans 'Resubmit case for re-review' %}"
                                            title="{% trans 'Resubmit for re-review' %}">
                                        <i class="fa fa-refresh" aria-hidden="true"></i>
                                        {% trans "Resubmit" %}
                                    </button>
                                </form>
                                {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="review-blank-slate">
                <i class="fa fa-list-alt" aria-hidden="true"></i>
                <h3>{% trans "No cases attached" %}</h3>
                <p>{% trans "Open a TestCase and click 'Send for review' to add it here." %}</p>
            </div>
            {% endif %}
        </div>
    </div>

    {% if is_reviewer and review_request.state != "cancelled" and not is_locked %}
    <div class="card-pf">
        <div class="card-pf-heading"><h3 class="card-pf-title">{% trans "Cast your vote" %}</h3></div>
        <div class="card-pf-body">

            {% if has_pending_items %}
            <div class="alert alert-warning" role="alert">
                <i class="pficon pficon-warning-triangle-o" aria-hidden="true"></i>
                <strong>{% trans "Voting is blocked." %}</strong>
                {% trans "All cases under review must have a decision recorded before you can cast your vote." %}
            </div>
            {% else %}

            <form method="post" action="{% url 'review-vote' review_request.pk %}" class="form-horizontal">
                {% csrf_token %}

                <div class="form-group {% if vote_form.decision.errors %}has-error{% endif %}">
                    <label class="col-md-2 control-label">{% trans "Your decision" %}</label>
                    <div class="col-md-10">
                        <label class="review-vote-radio">
                            <input type="radio" name="decision" value="approved" required>
                            <i class="pficon pficon-ok text-success" aria-hidden="true"></i> {% trans "Approve" %}
                        </label>
                        <label class="review-vote-radio">
                            <input type="radio" name="decision" value="needs_changes">
                            <i class="pficon pficon-warning-triangle-o text-warning" aria-hidden="true"></i> {% trans "Request changes" %}
                        </label>
                        <label class="review-vote-radio">
                            <input type="radio" name="decision" value="rejected">
                            <i class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></i> {% trans "Reject" %}
                        </label>
                        {{ vote_form.decision.errors }}
                    </div>
                </div>

                <div class="form-group {% if vote_form.comment.errors %}has-error{% endif %}">
                    <label class="col-md-2 control-label" for="id_comment">{% trans "Comment" %}</label>
                    <div class="col-md-10">
                        {{ vote_form.comment }}
                        <p class="help-block">{% trans "Optional. Markdown supported." %}</p>
                        {{ vote_form.comment.errors }}
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-paper-plane" aria-hidden="true"></i> {% trans "Submit vote" %}
                        </button>
                    </div>
                </div>
            </form>
            {% endif %}{# end has_pending_items else #}

        </div>
    </div>
    {% endif %}

    {% if is_owner and review_request.state != "cancelled" and not is_locked %}
    <div class="card-pf">
        <div class="card-pf-body">
            <form method="post" action="{% url 'review-cancel' review_request.pk %}"
                  data-confirm="{% trans 'Cancel this review request? This cannot be undone.' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger">
                    <i class="fa fa-ban" aria-hidden="true"></i> {% trans "Cancel review request" %}
                </button>
            </form>
        </div>
    </div>
    {% endif %}

    {# Threaded audit trail — derived from django-simple-history #}
    {% if activity %}
    <div class="card-pf">
        <div class="card-pf-heading">
            <h3 class="card-pf-title">
                <i class="fa fa-history" aria-hidden="true"></i> {% trans "Activity" %}
            </h3>
        </div>
        <div class="card-pf-body">
            {% include "tcms_review/_activity.html" %}
        </div>
    </div>
    {% endif %}

</div>
{% endblock %}