{% if full %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>{{ descriptor['id'] }}</title>
        <!-- Web Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i%7CMontserrat:400,700" rel="stylesheet">
        <link rel="icon" href="https://smartcitizen.me/assets/favicon_128x128.png" sizes="128x128">
    </head>
    <body>
{% endif %}
        <div {% if header %} id="report-header" {% else %} id="normal-header" {% endif %}>
            <h1 {% if header %} id="top" {% endif %}>{{ title }}</h1>
            {% if header %}
                <div style="text-align: right">
                    <img src="https://smartcitizen.me/assets/images/smartcitizen_logo.svg" alt="Smart Citizen Logo" width=50px height=50px>
                </div>
            {% endif %}
        </div>
        <div id="container">
            {% if details%}
                <div class="header">
                    <h2>Test details</h2>
                </div>
                <ul>
                    <li><strong>Author:</strong> {{ descriptor.author }}</li>
                    <li><strong>Date:</strong> {{ descriptor.date }}</li>
                    <li><strong>Comment:</strong> {{ descriptor.comment }}</li>
                    <li><strong>Conditions:</strong> {{ descriptor.type_test }}</li>
                    <li><strong>Project:</strong> {{ descriptor.project }}</li>
                </ul>
            {% endif %}
            {% if devices_summary %}
                <div class="header">
                    <h2>Devices summary</h2>
                </div>
                <details>
                    <summary>Devices list</summary>
                    <table>
                        <tr class="first">
                            <th style="width: 15vh;"> Device </th>
                            <th class='table-center' style="width: 35vh;"> Blueprint </th>
                            <th class='table-center' style="width: 20vh;"> Documentation </th>
                            <th class='table-center' style="width: 20vh;"> Timezone </th>
                            <th class='table-center' style="width: 20vh;"> Source </th>
                        </tr>
                        {% for key, value in descriptor.devices.items() %}
                            <tr>
                                <td>{{ key }}</td>
                                <td class='table-center'>{{ value.blueprint.upper().replace("_", " ") }}</td>
                                <td class='table-center'><a href="{{ value.documentation }}" >Documentation</a></td>
                                <td class='table-center'><a>{{ value.timezone }}</a></td>
                                <td class='table-center'><em>{{ value.source.upper().replace("_", " ") }}</em></td>
                            </tr>
                        {% endfor %}
                    </table>
                </details>
                <div class="header">
                    <h2>Device information</h2>
                    <p> Below is a description of each device, finding documentation and data sources.</p>
                </div>
                {% for device, _ in descriptor.devices.items() %}
                    <details>
                        <summary>Device {{ device }}</summary>
                        {% if descriptor.devices[device]['sensors'].items().__len__() == 0 %}
                            <p style="margin-left: 2rem;">Device empty. No data to show</p>
                        {% else %}
                            <table>
                                <tr class="first">
                                    <th class='table-center' style="width: 20vh;"> Channel </th>
                                    <th class='table-center' style="width: 10vh;"> Units </th>
                                    <th class='table-center' style="width: 20vh;"> Type (raw/processed) </th>
                                    <th class='table-center' style="width: 20vh;"> Algorithm </th>
                                    <th class='table-center' style="width: 60vh;"> Description </th>
                                </tr>
                                {% for metric, value in descriptor.devices[device]['sensors'].items() %}
                                    <tr>
                                        <td>{{ metric }}</td>
                                        <td class='table-center'><em>{{ value.units }}</em></td>
                                        <td class='table-center'>Raw</td>
                                        <td class='table-center'>n/a</td>
                                        {% if 'desc' in value %}
                                            <td class='table-center'>{{ value.desc }}</td>
                                        {% else %}
                                            <td class='table-center'>No description available</td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                                {% if 'metrics' in descriptor.devices[device] %}
                                    {% for metric, value in descriptor.devices[device]['metrics'].items() %}
                                        <tr>
                                            <td>{{ metric }}</td>
                                            <td class='table-center'>{{ value.units }}</td>
                                            <td class='table-center'>Processed</td>
                                            <td class='table-center'>{{ value.process }}</td>
                                            {% if value %}
                                                {% if 'desc' in value %}
                                                    <td class='table-center'>{{ value.desc }}</td>
                                                {% endif %}
                                            {% else %}
                                                <td class='table-center'>No description available</td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                            </table>
                        <br>
                    </details>
                    {% endif %}
                {% endfor %}
            {% endif %}
            {% if content %}
                <h2> Analysis </h2>
                {% for item, value in content.items() %}
                    <div class="analysis-block">
                    {% if value.show_title %}
                        <h3>{{ value.title }}</h3>
                    {% endif %}
                    {% if 'text' in value %}
                        <p>
                            {{ value.text|safe }}
                        </p>
                    {% endif %}
                    {% if 'image' in value %}
                        <div class="img-container">
                            <img src="{{ value.image }}" style="width:80%; max-width: 1000px">
                        </div>
                    {% endif %}
                    {% if 'iframe' in value %}
                        <div class="iframe-container">
                            {{ value.iframe }}
                        </div>
                    {% endif %}
                    </div>
                {% endfor %}
            {% endif %}
        </div>
{% if full %}
    </body>
</html>
{% endif %} 

<style type="text/css">

    body {
        text-align: justify;
        line-height: 1.6;
        font-size: 14px;
        font-family: Roboto, sans-serif; 
        margin: 15px;
        overflow: visible;
        margin-bottom: 50px;
    }

    div#container{
        padding-left: 40px;
        padding-right: 30px;
        {% if header %}
            padding-top: 40px;
        {% else %}
            padding-top: 20px;
        {% endif %}
    }

    div#analysis-block{
        page-break-inside: avoid;
    }

    h1#top {
        margin: 0px !important;
        padding: 0px !important;
        font-size: 250% !important;
        font-weight: bold;
    }

    h2{
        font-size: 21px;
        font-weight: 1.1em;
    }

    h3{
        font-size: 18px;
        font-weight: 1.1em;
    }

    h4{
        font-size: 15px;
        font-weight: 1em;
    }


/*    ul {
        list-style: none;
    }*/

    table {
        font-size: 13px;
        margin: auto;
        padding: 20px;
        text-align: center;

    }

    details{
        padding: 3px 20px;
    }

    summary{
/*        background: grey;
        color: white;*/
        text-emphasis: 2em;
        /*padding: 3px 20px;*/
        margin-bottom: 5px;
        border-radius: 20px;
    }

    div.img-container {
        text-align: center;
        padding: 20px;
    }

    div.iframe-container {
        text-align: center;
    }

    div#normal-header {
        padding-left: 40px;
    }

    div#report-header {
        display: flex;
        flex-direction: row;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        color: #FFFFFF;
        height: 120px;
        padding-left: 40px;
        overflow: hidden;
        border-top: none;
        background: #000000;
        box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
        border-radius: 5px 5px 0px 0px;
        padding-right: 60px;
    }

    td.table-center{
        text-align: center;
    }

    th.table-center{
        text-align: center;
    }

    tr.first{
        background: black;
        color: white;
        border-color: black;
    }

    @page
    {
        size: auto;   /* auto is the initial value */
        /* this affects the margin in the printer settings */
        margin-top: 15mm;
        margin-bottom: 15mm;
    }

    @media print {
        body{
          padding: 0mm !important;
          margin: 0mm !important;
        }

        div#report-header{
          background: #000000 !important;
          font-size: 90% !important;
          page-break-inside: avoid;
        }

        div.device { 
          display: block;
          page-break-inside: avoid; 
        }

        table { 
          page-break-inside: avoid;
        }
    } 
</style>