{% load static %}
{% 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 */
        }

        .WARNING, .WORK_IN_PROGRESS, .MEDIUM{
            background-color: rgb(247, 232, 113);
            text-align: center;
        }
        .NOTHING_TO_REPORT, .INFO{
            background-color: rgb(104, 198, 224);
            text-align: center;
        }
        .BREACH, .INCIDENT, .HIGH{
            background-color: rgb(244, 132, 116);
            text-align: center;
        }
        .DONE, .LOW{
            background-color: rgb(214, 229, 145);
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="product-table" id="table">
        <div class="header">
            <a href="https://www.atonra.ch" target="_blank" id="companylink">
                <img class="company-logo" title="Atonrâ Website" src="{% static 'portfolio/img/logo-atonra.svg' %}">
            </a>
            <div class="date">As of {{ review.changed|date:"M. jS, Y" }}</div>
        </div>

        <div class="header-content">
            <h1 class="text_center">{{ review.title }}
                {% if review.year %}
                        - {{ review.year|safe }} Report
                {% endif %}
            </h1>
        </div>

        <div>
            <table>
                <tr>
                    <th>Period covered :</th>
                    <td class="date">{{ review.from_date|date:"j.m.Y" }} - {{ review.to_date|date:"j.m.Y" }}</td>
                </tr>
                <tr>
                    <th>Status as of :</th>
                    <td>{{ today|date:"j.m.Y" }}</td>
                </tr>
            </table>
        </div>
        <br/>
        <div style="text-align:justify;"> {{ review.description|safe|linebreaksbr }} </div>
        <br/>
        {% for group_id, data_group in table.items %}
            <div class="widget">
                <div class="headline">
                    {{ forloop.counter }} - {{ data_group.name }}
                </div>
                <table class="table" class="print-friendly" style="margin-bottom: 20px;">
                    <thead>
                        <tr>
                            <th style="width:20%; text-align: center;">Subjects</th>
                            <th style="width:40%; text-align: center;">Description Organization</th>
                            <th style="width:10%; text-align: center;">Level of Risk</th>
                            <th style="width:30%; text-align: center;">Remarks</th>
                        </tr>
                    </thead>
                    <tbody>
                        <div class="maininfo">
                            {% for key, data_task in data_group.tasks.items %}
                                <tr class="top-row">
                                    <td style="text-align: left;font-size:12px;font-weight: bold;">{{ data_task.title }}</td>
                                    <td style="text-align: justify;font-size:11px;margin-left: 2px;">
                                        {% if data_task.description %}
                                            {{ data_task.description|safe|linebreaksbr }}
                                        {% endif %}
                                    </td>
                                    <td class='{{ data_task.risk_level }}' style="text-align: center;font-weight: bold;">
                                        {% if data_task.risk_level %}
                                            {{ data_task.risk_level }}
                                        {% else %}
                                        -
                                        {% endif %}
                                    </td>
                                    <td style="text-align: justify;">
                                        {% if data_task.remarks %}
                                            {{ data_task.remarks|safe|linebreaksbr }}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </div>
                    </tbody>

                </table>
            </div>
        {% endfor %}

    </div>
</body>
</html>
