{% load i18n %}

<style>
  th,
  td {
    border: 1px solid #e2e8f0;
    padding: 8px;
  }

  th {
    background-color: #f8fafc;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    color: #475569;
  }

  tr:nth-child(even) {
    background-color: #f8fafc; /* for both the scenarios and matrices */
  }

  .risk-level {
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
  }

  tbody tr {
    page-break-inside: avoid;
  }

  .cell-content {
    max-width: 200px;
    word-wrap: break-word;
  }
</style>

<table class="w-full p-4 leading-normal">
  <thead>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "ID" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Name" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Threats" %}
    </th>
    {% if feature_flags.inherent_risk %}
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Inherent risk level" %}
    </th>
    {% endif %}
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Existing controls" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Current risk level" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Residual risk level" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Status" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Suggested measures" %}
    </th>
    <th
      class="px-4 py-3 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
    >
      {% trans "Strength of knowledge" %}
    </th>
  </thead>
  <tbody>
    {% for scenario in scenarios %}
    <tr class="">
      <td class="px-5 py-5 border-b border-gray-200 text-sm">
        {{ scenario.ref_id }}
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        <div class="flex items-center">
          <div class="ml-0">
            <p
              id="scenario{{ scenario.id }}"
              class="text-md font-semibold whitespace-no-wrap"
            >
              {{ scenario.name }}
            </p>
          </div>
        </div>
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        {% for threat in scenario.threats.all %}
        <p class="whitespace-no-wrap">{{ threat.get_name_translated }}</p>
        {% empty %} -- {% endfor %}
      </td>
      {% if feature_flags.inherent_risk %}
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        <p
          class="flex justify-center whitespace-no-wrap rounded"
          style="background-color: {{ scenario.get_inherent_risk.hexcolor }}"
        >
          {{ scenario.get_inherent_risk.name }}
        </p>
      </td>
      {% endif %}
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        <ul class="list-disc space-y-4 ml-4">
          {% for measure in scenario.existing_applied_controls.all %}
          <li class="text-gray-900">
            <p
              class="text-gray-900 text-md font-semibold whitespace-no-wrap hover:text-blue-400"
            >
              {{ measure }}
            </p>
          </li>
          {% endfor %}
        </ul>
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        <p
          class="flex justify-center whitespace-no-wrap rounded"
          style="background-color: {{ scenario.get_current_risk.hexcolor }}"
        >
          {{ scenario.get_current_risk.name }}
        </p>
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        <p
          class="flex justify-center whitespace-no-wrap rounded"
          style="background-color: {{ scenario.get_residual_risk.hexcolor }}"
        >
          {{ scenario.get_residual_risk.name }}
        </p>
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        {{ scenario.get_treatment_display }}
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        <ul class="list-disc space-y-4 ml-4">
          {% for measure in scenario.applied_controls.all %}
          <li class="text-gray-900">
            <p
              class="text-gray-900 text-md font-semibold whitespace-no-wrap hover:text-blue-400"
            >
              {{ measure }}
            </p>
          </li>
          {% endfor %}
        </ul>
      </td>
      <td class="px-4 py-5 border-b border-gray-200 text-sm">
        {{ scenario.strength_of_knowledge }}
      </td>
    </tr>
    {% empty %}
    <tr class="text-black p-4 text-center">
      <td colspan="8" class="py-2">
        <i class="inline fas fa-exclamation-triangle"></i>
        <p class="inline test-gray-900">{% trans "No scenario found." %}</p>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>