<div class="container">
    <div class="panel">
        <div class="panel-heading">
            <span class="icon fa fa-file-shield"></span>
            {% trans %}Data Policy Report{% endtrans %}
        </div>

        <div class="panel-block">
            <p class="title has-text-weight-bold is-4">Score: {{ score }}/10</p>
        </div>

        <div class="panel-block">
            <strong>{% trans %}Details{% endtrans %}:</strong>
        </div>

        {% for item in detail %}
            <div class="panel-block is-flex is-align-items-center">
                <span class="mr-3
                             {% if item.score > 0 %}has-text-success
                             {% elif item.score < 0 %}has-text-danger
                             {% else %}has-text-black
                             {% endif %}
                             has-text-weight-bold">
                    {{ item.score }}
                </span>
                <p>{{ item.description }}</p>
            </div>
        {% endfor %}
    </div>
</div>