{% load i18n core_extras %}

<div class="node">
  {% if not node.requirement_node.assessable %}
    <div class="font-semibold">{{ node.requirement_node.display_long }}</div>
    {% if node.bar_graph %}
      {% bar_graph assessments ancestors node.requirement_node %}
    {% endif %}
  {% else %}
    <div
      class="flex flex-col shadow-md border rounded-lg px-4 py-2 m-2 ml-0 items-center border-t-2 border-t-{{ node.result_color_class }} border-{{ node.result_color_class }}"
    >
      <div class="flex flex-row justify-between w-full">
        <div class="font-semibold">{{ node.assessments.requirement }}</div>
        <div class="flex flex-row space-x-2">
          <div
            class="text-center rounded-lg whitespace-nowrap px-2 py-1 text-{{ node.status_color_class }}"
          >
            {{ node.status }}
          </div>
          <div
            class="text-white text-center rounded-lg whitespace-nowrap px-2 py-1 bg-{{ node.result_color_class }}"
          >
            {{ node.result }}
          </div>
          {% if node.assessments.is_scored %}
          <div class="text-center whitespace-nowrap px-2 py-1">
            {{ node.assessments.score }}
          </div>
          {% endif %}
        </div>
      </div>
      {% if node.assessments.requirement.description %}
        <div class="text-left w-full">
          {{ node.assessments.requirement.get_description_translated }}
        </div>
      {% endif %}
      {% if node.assessments.answers %}
        <div class="text-left w-full">
          {% for key, value in node.assessments.answers.items %}
                {% with question=node.assessments.requirement.questions|get_item:key %}
                  <p class="font-semibold">{{ question.text }}</p>
                  {% with answer=question|get_answers:value %}
                    {% if answer|is_string %}
                      <span style="color: indigo">{{ answer }}</span>
                    {% elif answer|is_list %}
                      <span style="color: indigo">{{ answer|join:", " }}</span>
                    {% else %}
                      <span style="color: gray"> {% trans "No answer" %}</span>
                    {% endif %}
                  {% endwith %}
                {% endwith %}
          {% endfor %}
        </div>
      {% endif %}
      {% if node.assessments.observation %}
          <div class="text-left w-full">
            <p class="font-semibold">{% trans "Observation:" %}</p>
            <p>{{ node.assessments.observation }}</p>
          </div>
      {% endif %}
    </div>
    {% if node.bar_graph %}
      {% bar_graph assessments ancestors node.requirement_node %}
    {% endif %}
    {% if node.direct_evidences %}
      <div
        class="flex flex-col px-4 py-2 m-2 ml-0 rounded-lg bg-indigo-200 direct_evidences_block"
      >
        <div class="grid grid-cols-2 justify-items-left font-semibold">
          <div>{% trans "Associated evidence:" %}</div>
        </div>
        {% for evidence in node.direct_evidences %}
          {% if evidence.last_revision and evidence.last_revision.attachment %}
            <li>
              <a
                class="text-indigo-700 hover:text-indigo-500"
                target="_blank"
                href="evidences/{{ evidence.last_revision.attachment.name|basename }}"
                >{{ evidence.name }}</a
              >
            </li>
          {% else %}
            <li>{{ evidence.name }}</li>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
    {% if node.applied_controls %}
      <div
        class="flex flex-col px-4 py-2 m-2 ml-0 rounded-lg bg-indigo-200 applied_controls_block"
      >
        <div class="grid grid-cols-2 justify-items-left font-semibold">
          <div>{% trans "Applied controls:" %}</div>
          <div>{% trans "Evidence of applied controls:" %}</div>
        </div>
        <div class="flex flex-row">
          <div class="flex flex-col items-left w-1/2">
            {% for control in node.applied_controls %}
              <li>
                {{ control.measure.name }}: {{ control.measure.get_result_display }}
              </li>
            {% endfor %}
          </div>
          <div class="flex flex-col items-left w-1/2">
            {% for control in node.applied_controls %}
              {% for evidence in control.evidences %}
                {% if evidence.last_revision and evidence.last_revision.attachment %}
                <li>
                  <a
                    class="text-indigo-700 hover:text-indigo-500"
                    target="_blank"
                    href="evidences/{{ evidence.last_revision.attachment.name|basename }}"
                    >{{ control.measure.name }}/{{ evidence.name }}</a
                  >
                </li>
                {% else %}
                  <li>{{ evidence.name }}</li>
                {% endif %}
              {% endfor %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% endif %}
  {% endif %}
  <div id="children-of-{{ node.requirement_node.urn }}">
    {% for child_node in node.children %}
      {% include "snippets/req_node.html" with node=child_node %}
    {% endfor %}
  </div>
</div>