{% load static %}
{% load i18n %}
{% load humanize %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ review.computed_str }}</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,500&display=swap" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html, body {
            min-height: 100%;
            padding: 0px;
            margin: 0px;
            font-family: 'Roboto', sans-serif;
            font-size: 12px;
            font-weight: 300;
            color: #000000;
        }

        .company-logo {
            width: 300px;
        }
        .product-table {
            width: 100%;
            align-self: center;
            margin: auto;
            justify-self: center;
        }
        .month {
            color: #3c4759;
            font-weight: bold;
            font-size: small;
        }
        .text_center{
            text-align: center;
        }
        .header-content th {
            text-align: left;
            width: 210px;
        }

        .headline {
            background-color: #3c4759;
            color: white;
            text-align: center;
            font-weight: 500;
            font-size: 12pt;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .header {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .table {
            width: 100%;
            border: none;
            border-collapse: collapse;
            margin: auto
        }

        .table>tbody, .table>tfoot {
            background-color: transparent
        }

        .table>thead {
            background-color: #9ca3ad;
        }

        .top-row {
            border-top: 1px solid lightgrey;
        }
        .table>thead {
            height: 30px;
        }

        .table>tbody>tr:last-child>td, .table>tbody>tr:last-child>th {
            padding-bottom: 15px;
        }

        .table>thead>tr>th {
            color: white;
            font-weight: 500;
            vertical-align: middle;
        }

        .table td, .table th {
            line-height: 1.4em;
            font-size: 1.1em;
            font-weight: 300;
            vertical-align: top;
            text-align: justify;
            overflow: hidden;
        }
        table.print-friendly tr td, table.print-friendly tr th {
            page-break-inside: avoid;
        }

        #summery_table tr:nth-child(even){background-color: #f2f2f2;}
        #summery_table tbody th, #summery_table tbody th{border: '1px solid #ddd';}

        .bad_rating {
            background-color: rgb(244, 132, 116);
            text-align: center;
        }
        .medium_rating {
            background-color: rgb(247, 232, 113);
            text-align: center;
        }
        .good_rating {
            background-color: rgb(214, 229, 145);
            text-align: center;
        }
        .comments {
            font-style: italic;font-size: 10px;
            text-align: justify;
            background-color: #f2f2f2;
        }
        @media print {
            .pagebreak { page-break-before: always; } /* page-break-after works, as well */
        }
    </style>
</head>
<body>
    <div class="product-table" id="table">
        <div class="header">
            <a href="{{base_url}}" target="_blank">
                <img class="company-logo" title="{% translate 'Atonrâ Website' %}" src="{% static 'portfolio/img/logo-atonra.svg' %}">
            </a>
        </div>

        <div class="header-content">
            <h2 class="text_center">{{ review.type }} {% translate "Evaluation Form" %}
                {% if review.year %}
                     - {{ review.year|safe }}
                {% endif %}
            </h2>
            <div>
                <span class="month text_center">{{ review.computed_str }}</span>
                <br/><br/>
            </div>
            <div>
                <table>
                    <tr>
                        <th>{% translate "Reviewee" %} :</th>
                        <td class="subject"> {{ review.reviewee.computed_str }}</td>
                    </tr>
                    <tr>
                        <th>{% translate "Reviewer" %} :</th>
                        <td class="subject"> {{ review.reviewer.computed_str }}</td>
                    </tr>
                    <tr>
                        <th>{% translate "Moderator" %} :</th>
                        <td class="subject"> {{ review.moderator.computed_str }}</td>
                    </tr>
                    <tr>
                        <th>{% translate "Period covered" %} :</th>
                        <td class="date">{{ review.from_date|date:"j.m.Y" }} - {{ review.to_date|date:"j.m.Y" }}</td>
                    </tr>
                    <tr>
                        <th>{% translate "Deadline" %} :</th>
                        <td>{{ review.review_deadline|date:"j.m.Y" }}</td>
                    </tr>
                    <tr>
                        <th>{% translate "Review" %} :</th>
                        <td>{{ review.review|date:"j.m.Y h:m a" }}</td>
                    </tr>
                </table>
                <br/>
                <table id='summery_table' style='margin-bottom: 20px;border-collapse: collapse;'>
                    <thead>
                        <tr>
                            <th></th>
                            <th>{% translate "Reviewee" %}</th>
                            <th>{% translate "Reviewer" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>{% translate "Notification date review completed" %} :</th>
                            <td>{{ review.completely_filled_reviewee|date:"j.m.Y" }}</td>
                            <td>{{ review.completely_filled_reviewer|date:"j.m.Y" }}</td>
                        </tr>
                        <tr>
                            <th>{% translate "Date of signature" %} :</th>
                            <td>{{ review.signed_reviewee|date:"j.m.Y h:m a" }}</td>
                            <td>{{ review.signed_reviewer|date:"j.m.Y h:m a" }}</td>

                        </tr>
                    </tbody>

                </table>
                <div class="widget">
                    <div class="headline">
                        {% translate "Review of questions to be answered on a scale of 1 to 4" %}
                    </div>
                </div>
                <table class="table" class="print-friendly" style="margin-bottom: 20px;">
                    <thead>
                        <tr>
                            <th style="width:20%; text-align: center;">{% translate "Category" %}</th>
                            <th style="width:60%; text-align: center;">{% translate "Questions & Comments" %}</th>
                            <th style="width:10%; text-align: center;">{% translate "Reviewee" %}</th>
                            <th style="width:10%; text-align: center;">{% translate "Reviewer" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <div class="maininfo">
                            {% for category_id, data_category in rating_table.items %}
                                {% for key, data_questions in data_category.questions.items %}
                                    <tr class="top-row">
                                        <td style="text-align: left;font-size:10px;">{{ data_category.name }}</td>
                                        <td style="text-align: left;font-size:11px;margin-left: 2px;">{{ data_questions.name }}
                                            <p class="comments">
                                                {% if data_questions.answers_text.reviewee %}
                                                    <b>{% translate "Reviewee" %} : </b>{{ data_questions.answers_text.reviewee|safe|linebreaksbr }}
                                                    {% if data_questions.answers_text.reviewer %}
                                                        <br/>
                                                    {% endif %}
                                                {% endif %}
                                                {% if data_questions.answers_text.reviewer %}
                                                    <b>{% translate "Reviewer" %} : </b>{{data_questions.answers_text.reviewer|safe|linebreaksbr }}
                                                {% endif %}
                                            </p>
                                        </td>
                                        <td style="text-align: center;font-weight: bold;">{{ data_questions.answers.reviewee }}</p></td>
                                        <td style="text-align: center;font-weight: bold;">{{ data_questions.answers.reviewer }}</p></td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                            <tr class="top-row">
                                <td style="text-align: center;font-weight: bold;">#<br> μ</td>
                                <td style="text-align: center;font-weight: bold;">{{ number_total_rating }}<br/>{% translate "Global rating (weighted)" %}</td>
                                <td class='{{ global_rating_status_reviewee }}' style="text-align: center;font-weight: bold;">&nbsp;<br>{{ global_rating_reviewee }}</td>
                                <td class='{{ global_rating_status_reviewee }}' style="text-align: center;font-weight: bold;">&nbsp;<br>{{ global_rating_reviewer }}</td>
                            </tr>
                        </div>
                    </tbody>
                </table>

                <div class="pagebreak"> &nbsp;</div>
                {% for category_id, data_category in table.items %}
                    <div class="widget">
                        <div class="headline">
                            {{ forloop.counter }} - {{ data_category.name }}
                        </div>

                        {% for key, data_questions in data_category.questions.items %}
                        <table class="table" class="print-friendly">
                            <thead>
                                <tr>
                                    <th style="width:100%; text-align: center;">{{ data_questions.name }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <div class="maininfo">
                                    {% for by, answer in data_questions.answers.items %}
                                        <tr class="top-row">
                                            <td>
                                                <p>
                                                    <b>{{ by }} :</b>
                                                    {% if answer %}
                                                        {{ answer|safe|linebreaksbr }}
                                                    {% endif %}
                                                </p>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </div>
                            </tbody>
                        </table>
                        {% endfor %}

                    </div>
                {% endfor %}

                <div class="widget">
                    <div class="headline">
                        {% translate "Feedback" %}
                    </div>
                    <table class="table" class="print-friendly">
                        <tbody>
                            <div class="maininfo">
                                <tr class="top-row">
                                    <td>
                                        <p>
                                            <b>{{ review.reviewee.computed_str }} :</b>
                                            {{ review.feedback_reviewee|safe|linebreaksbr }}
                                        </p>
                                    </td>
                                </tr>
                                <tr class="top-row">
                                    <td>
                                        <p>
                                            <b>{{ review.reviewer.computed_str }} :</b>
                                            {{ review.feedback_reviewer|safe|linebreaksbr }}
                                        </p>
                                    </td>
                                </tr>
                            </div>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <br/>
    </div>

</body>
</html>
