{% load i18n %}
{% load course_flow_templatetags %}
<div class="main-block">
  <div data-component="topbar"></div>

  <div class="topnav hide-print">
    <div class="titlebar">
      <div class="title"></div>
      <div class="floatbar">
        {% if user|has_group:"Teacher" %}
          <div id="create-options">
            <div class="hover-shade">
              <span class="material-symbols-rounded filled">add_circle</span>
            </div>
            <div id="create-links" class="create-dropdown">
              <a id="project-create" class="hover-shade"
                 href="{% url 'course_flow:project-create' %}">{% trans 'Project' %}</a>
              <a id="activity-create" class="hover-shade">{% trans 'Activity' %}</a>
              <a id="course-create" class="hover-shade">{% trans 'Course' %}</a>
              <a id="program-create" class="hover-shade">{% trans 'Program' %}</a>
            </div>
          </div>
        {% endif %}
        {% if user.username %}
          <div id="notifications">
            <div class="hover-shade">
              <span class="material-symbols-rounded filled">notifications</span>
            </div>
            <div id="notifications-dropdown" class="create-dropdown">
              <a href="{% url 'course_flow:user-notifications' %}" class="collapsed-text-show-more">{% trans "See all" %}</a>
              {% for notification in user.notifications.all|slice:":7" %}
                <a class="list-notification hover-shade
                      {% if notification.is_unread %}
                        unread
                      {% endif %}
                    " href="
                      {% if notification.content_object.type == 'project' %}
                        {% url 'course_flow:project-update' pk=notification.content_object.pk %}
                      {% else %}
                        {% url 'course_flow:workflow-update' pk=notification.content_object.pk %}
                      {% endif %}
                    ">
                  <div class="created-on">{{ notification.created_on }}</div>
                  {{ notification.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div id="account-options">
            <div class="hover-shade">
              <span class="material-symbols-rounded filled">account_circle</span>
            </div>
            <div id="account-links" class="create-dropdown">
              <a id="profile" class="hover-shade" href="{% url 'course_flow:user-update' %}">{% trans 'Profile' %}</a>
              <a id="reset-password" class="hover-shade"
                 href={% course_flow_password_change_url %}>{% trans 'Reset my password' %}</a>
              <a id="notification-settings" class="hover-shade"
                 href="{% url 'course_flow:user-update' %}">{% trans 'Notification settings' %}</a>
              <hr>
              <a id="return-my-dalite" class="hover-shade"
                 href={% course_flow_return_url %}>{% course_flow_return_title %}</a>
              <a id="logout" class="hover-shade">{% trans 'Sign out' %}</a>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    <div id="update-notifications"></div>
    <div class="menubar hidden">
      <div id="floatbar" class="floatbar">
        <div id="visible-icons"></div>
        <div id="overflow-options">
          <span class="hover-shade green material-symbols-rounded">more_horiz</span>
          <div id="overflow-links" class="create-dropdown"></div>
        </div>
      </div>
      <div id="userbar" class="floatbar"></div>
      <div id="viewbar" class="floatbar"></div>
    </div>
  </div>

  <div class="right-panel-wrapper">
    <div id="container" class="body-wrapper"></div>
    <div id="sidebar-container"></div>
  </div>
</div>
