{% if data['factSheetRasterResult']['imageUri'] %}
<div class="area-map-image">
    <img src="{{ data['factSheetRasterResult']['imageUri'] }}" alt="Område" />
</div>
{% endif %}

{% if data['factList'] %}
    {% set pie_chart, options = create_pie_chart(data['factList'], 'AREA_TYPES') -%}

    {% if options %}
    <div class="fact-sheet__data">
        <h3>Fordeling av areal per arealtype</h3>

        <div>
            <div class="fact-sheet__data__table">
                <table>
                    <thead>
                        <tr>
                            <th>Arealtype</th>
                            <th>Areal (m²)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in options %}
                        <tr>
                            <td>{{ entry['label'] }}</td>
                            <td>{{ entry['value_formatted'] }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="fact-sheet__data__pie-chart">
                <div class="fact-sheet__data__pie-chart__svg-wrapper">
                    {{ pie_chart }}
                </div>

                <div class="fact-sheet__data__pie-chart__legend">
                    {% for entry in options %}
                    <div>
                        <span style="background-color: {{ entry['color'] }}"></span>
                        <span>{{ entry['legend_item'] }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% set pie_chart, options = create_pie_chart(data['factList'], 'BUILDINGS') -%}

    {% if options %}
    <div class="fact-sheet__data">
        <h3>Fordeling av boligtyper</h3>

        <div>
            <div class="fact-sheet__data__table">
                <table>
                    <thead>
                        <tr>
                            <th>Boligtype</th>
                            <th>Antall</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in options %}
                        <tr>
                            <td>{{ entry['label'] }}</td>
                            <td>{{ entry['value_formatted'] }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="fact-sheet__data__pie-chart">
                <div class="fact-sheet__data__pie-chart__svg-wrapper">
                    {{ pie_chart }}
                </div>

                <div class="fact-sheet__data__pie-chart__legend">
                    {% for entry in options %}
                    <div>
                        <span style="background-color: {{ entry['color'] }}"></span>
                        <span>{{ entry['legend_item'] }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endif %}