{% load i18n %}
{% if messages %}
<div class="oh-wrapper">
    {% for message in messages %}
    <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{message.tags}}">
        {{ message }}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
<span class="oh-activity-sidebar__header float-left">
    <ion-icon
      name="chevron-back-outline"
      class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
      id="close"

      data-target="#activitySidebar"
    ></ion-icon>
</span>
    <span class="oh-activity-sidebar__title">{{cand}}'s {% trans "Notes" %}</span>
  <div class="oh-activity-sidebar__body">
    <ol class="oh-activity-sidebar__qa-list" role="list">
        {% for note in cand.candidatenote_set.stagenote_set.all %}
      <li class="oh-activity-sidebar__qa-item">
        <span class="oh-activity-sidebar__q"
          >{{forloop.counter}}. {{note.title}}</span
        >
        <span
          >{{note.description}}</span
        >
        <span class="oh-activity-sidebar__a">
            {% trans "by" %} <img src="https://ui-avatars.com/api/?name={{note.updated_by.get_full_name}}&amp;background=random" style="width: 1.5em; border-radius: 100%;" alt="User"> {{note.updated_by}} @{{note.stage_id}}
        </span>
      </li>
      {% endfor %}
    </ol>
  </div>

  <script>
    $(document).ready(function () {
      $('#close').attr('class', 'oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close md hydrated');
    });
    $('#close').click(function (e) {
      $('#activitySidebar').removeClass('oh-activity-sidebar--show');
    });
  </script>