{% load i18n %}

<main class="p-4">
    {# Information Banner #}
    <div class="bg-white p-6 mb-8 shadow rounded-lg">
        <div class="flex flex-row space-x-8">
            {# Left Column - Assessment Details #}
            <div class="w-1/3">
                <h2 class="text-sm font-semibold mb-2">{% trans "Risk assessment" %}</h2>
                <p class="text-base font-semibold mb-4">{{ risk_assessment.perimeter }}/{{ risk_assessment }}</p>

                <div class="space-y-2">
                    {# Risk Matrix #}
                    <div>
                        <h3 class="text-sm font-semibold">{% trans "Risk matrix:" %}</h3>
                        <p class="ml-4">{{ risk_assessment.risk_matrix }}</p>
                    </div>

                    {# Authors #}
                    <div>
                        <h3 class="text-sm font-semibold">{% trans "Authors:" %}</h3>
                        <ul class="ml-4">
                            {% for author in risk_assessment.authors.all %}
                                <li>{{ author }}</li>
                            {% endfor %}
                        </ul>
                    </div>

                    {# Reviewers #}
                    <div>
                        <h3 class="text-sm font-semibold">{% trans "Reviewers:" %}</h3>
                        <ul class="ml-4">
                            {% for author in risk_assessment.reviewers.all %}
                                <li>{{ author }}</li>
                            {% endfor %}
                        </ul>
                    </div>

                    {# Status Information #}
                    <div class="space-y-1">
                        <p>
                            <span class="text-sm font-semibold">{% trans "Status:" %}</span>
                            {{ risk_assessment.status|default:"--" }}
                        </p>
                        <p>
                            <span class="text-sm font-semibold">{% trans "ETA:" %}</span>
                            {{ risk_assessment.eta|date }}
                        </p>
                        <p>
                            <span class="text-sm font-semibold">{% trans "Due date:" %}</span>
                            {{ risk_assessment.due_date|date }}
                        </p>
                        <p>
                            <span class="text-sm font-semibold">{% trans "Created at:" %}</span>
                            {{ risk_assessment.created_at|date }}
                        </p>
                        <p>
                            <span class="text-sm font-semibold">{% trans "Updated at:" %}</span>
                            {{ risk_assessment.updated_at|date }}
                        </p>
                    </div>
                </div>
            </div>

            {# Right Column - Description #}
            <div class="w-2/3">
                <h3 class="text-sm font-semibold mb-2">{% trans "Description" %}:</h3>
                <div class="text-sm">
                    {{ risk_assessment.description|default:""|linebreaksbr }}
                </div>
            </div>
        </div>
    </div>

    {# Risk Scenarios Section #}
    <div class="bg-white p-6 mb-8 shadow rounded-lg">
        <h2 class="text-lg font-semibold mb-4">
            {% trans "Associated Risk scenarios" %} ({{ context|length }}):
        </h2>
        {% include 'snippets/ri_list_nested.html' %}
    </div>

    {# Risk Matrix View Section #}
    <div class="bg-white p-6 mb-8 shadow rounded-lg page-break">
        <h2 class="text-xl font-semibold mb-6">{% trans "Risk matrix view" %}</h2>
        {% with template_name='snippets/risk_matrix'|stringformat:"s"|add:settings.swap_axes|add:settings.flip_vertical|add:'.html' %}
            {% if ri_clusters.inherent %}
            {# inherent Risk Matrix #}
            <div class="mb-8 shadow rounded-lg p-6">
                <h3 class="font-bold text-lg mb-4">{% trans "Inherent" %}</h3>
                {% include template_name with enriched_data=ri_clusters.inherent %}
            </div>
            {% endif %}

            {# Current Risk Matrix #}
            <div class="mb-8 shadow rounded-lg p-6">
                <h3 class="font-bold text-lg mb-4">{% trans "Current" %}</h3>
                {% include template_name with enriched_data=ri_clusters.current %}
            </div>

            {# Residual Risk Matrix #}
            <div class="shadow rounded-lg p-6">
                <h3 class="font-bold text-lg mb-4">{% trans "Residual" %}</h3>
                {% include template_name with enriched_data=ri_clusters.residual %}
            </div>
        {% endwith %}
    </div>

    {# Risk Legend #}
    <div class="p-4">
        {% include 'snippets/risk_legend.html' %}
    </div>
</main>