{% 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>{{ form.title }}</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';}
        .comments {
            font-style: italic;font-size: 10px;
            text-align: justify;
            background-color: #f2f2f2;
        }
        .subtitle {
            font-weight: bold;
        }
        @media print {
            .pagebreak { page-break-before: always; } /* page-break-after works, as well */
        }
    </style>
</head>
<body>

    {% if is_signature %}
        <div class="product-table">
            <div class="header">
                <a href="https://www.atonra.ch" target="_blank" id="companylink">
                    <img max-width="100px" class="company-logo" title="Atonrâ Website" src="{% static 'portfolio/img/logo-atonra.svg' %}">
                </a>
                <div class="date">As of {{ today|date:"M. jS, Y" }}</div>
            </div>
            <br/><br/>
            <div class="header-content">
                <div>
                    <span class="month">{{ form.compliance_form.title }}</span>
                    <br/><br/>
                </div>
                <div>
                    <table>
                        <tr>
                            <th>Version :</th>
                            <td class="subject"> {{ form.version }}</td>
                        </tr>
                        <tr>
                            <th>Period covered :</th>
                            <td class="date">{{ form.start|date:"j.m.Y" }} - {{ form.end|date:"j.m.Y" }}</td>
                        </tr>
                        <tr>
                            <th>Signer :</th>
                            <td>{{ form.person }}</td>
                        </tr>
                        <tr>
                            <th>Signed :</th>
                            <td>{{ form.signed }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        {% if form_type == "TEXT" %}
            {{ form.compliance_form.policy|safe }}
        {% endif %}

        </br><p></p></br>

        {% if form_type == "FORM" %}
            <div class="product-table">
                {% for section in form.compliance_form_signatures.all %}
                    <div class="widget">
                        <div class="headline">
                            {{ forloop.counter }} - {{ section.name }}
                        </div>
                        <table class="table" class="print-friendly" style="margin-bottom: 20px;">
                            <thead>
                                <tr>
                                    <th style="width:60%; text-align: center;">Subjects</th>
                                    <th style="width:10%; text-align: center;">Answer</th>
                                    <th style="width:20%; text-align: center;">Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                <div class="maininfo">
                                    {% for rule in section.rules.all %}
                                        <tr class="top-row">
                                            <td style="text-align: justify;font-size:11px;margin-left: 2px;">
                                                {% if rule.text %}
                                                    {{ rule.text|safe }}
                                                {% endif %}
                                            </td>
                                            <td class='{{ rule.risk_level }}'  style="text-align: center;font-weight: bold;">
                                                {{ rule.ticked }}
                                            </td>
                                            <td style="text-align: justify;">
                                                {% if rule.comments %}
                                                    {{ rule.comments|safe }}
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </div>
                            </tbody>

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

    {% else %}
        <div class="product-table" id="table">
            <div class="header">
                <a href="https://www.atonra.ch" target="_blank" id="companylink">
                    <img max-width="100px" class="company-logo" title="Atonrâ Website" src="{% static 'portfolio/img/logo-atonra.svg' %}">
                </a>
                <div class="date">As of {{ today|date:"M. jS, Y" }}</div>
            </div>
            <br/><br/>
            <div class="header-content">
                <div>
                    <span class="month">{{ form.title }}</span>
                    <br/><br/>
                </div>
                <div>
                    <table>
                        <tr>
                            <th>Version :</th>
                            <td class="subject"> {{ form.version }}</td>
                        </tr>
                        <tr>
                            <th>Period covered :</th>
                            <td class="date">{{ form.start|date:"j.m.Y" }} - {{ form.end|date:"j.m.Y" }}</td>
                        </tr>
                        <tr>
                            <th>Status :</th>
                            <td style="font-weight: bold;" >{{ form.status }}</td>
                        </tr>
                        <tr>
                            <th>Persons target :</th>
                            {% if form.only_internal %}
                                <td>Internals </td>
                            {% else %}
                                <td>Internal and External</td>
                            {% endif %}
                        </tr>
                    </table>
                </div>
            </div>
            <div>
                <p>
                    <span class="subtitle">Signers Group: </th><br/>
                    <ul>
                        {% for group in form.assigned_to.all %}
                            <li>{{ group.name }}</li>
                        {% endfor %}
                    </ul>
                </p>
            </div>
        </div>

        </br><p></p></br>

        {% if form_type == "TEXT" %}
            {{ form.compliance_form.policy|safe }}
        {% endif %}

        {% if form_type == "FORM" %}
            <div class="product-table" id="table">
                {% for section in form.compliance_forms.all %}
                    <div class="widget">
                        <div class="headline">
                            {{ forloop.counter }} - {{ section.name }}
                        </div>
                        <table class="table" class="print-friendly" style="margin-bottom: 20px;">
                            <thead>
                                <tr>
                                    <th style="width:60%; text-align: center;">Subjects</th>
                                    <th style="width:10%; text-align: center;">Expected Answer</th>
                                    <th style="width:20%; text-align: center;">Remarks</th>
                                </tr>
                            </thead>
                            <tbody>
                                <div class="maininfo">
                                    {% for rule in section.rules.all %}
                                        <tr class="top-row">
                                            <td style="text-align: justify;font-size:11px;margin-left: 2px;">
                                                {% if rule.text %}
                                                    {{ rule.text|safe }}
                                                {% endif %}
                                            </td>
                                            <td class='{{ rule.risk_level }}'  style="text-align: center;font-weight: bold;">
                                                {{ rule.ticked }}
                                            </td>
                                            <td style="text-align: justify;">
                                                {% if rule.comments %}
                                                    {{ rule.comments|safe }}
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </div>
                            </tbody>

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

    {% endif %}





</body>
</html>
