{% assign courses_by_progress = enrolled_courses | sort: "progress" %}
{% assign learning_paths_by_progress = enrolled_learning_paths | sort: "progress" %}

  <div class="dashboard-title">RECENT ACTIVITY</div>
    <div class="recent-activity-widget">
      <table class="recent-activity-table" id='recentActivityTable'>
        <tr>
          <th>Name</th>
          <th>Status</th>
        </tr>
        {% for course in courses_by_progress %}
          {% if course.progress > 0 %}
            <tr data-progress="{{course.progress}}">
              <td width="70%" class="name-element"><a href="{% route course, id: course.id %}">{{course.name}}</a></td>
              <td width="30%" class="progress-element">
                <div>
                  {% if course.progress == 100 %}
                    <i class="far fa-check-circle"></i> <span>completed</span>
                  {% else %}
                    <i class="fas fa-spinner"></i> <span>in progress</span>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% endif %}
        {% endfor %}
        {% for learning_path in learning_paths_by_progress %}
          {% if learning_path.progress > 0 %}
            <tr data-progress="{{learning_path.progress}}">
              <td width="70%"><a class="name-element" href="{% route learning_path, id: learning_path.id %}">{{learning_path.name}}</a></td>
              <td width="30%" class="progress-element">
                <div>
                  {% if learning_path.progress == 100 %}
                    <i class="far fa-check-circle"></i> <span>completed</span>
                  {% else %}
                    <i class="fas fa-spinner"></i> <span>in progress</span>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% endif %}
        {% endfor %}
      </table>
    </div>
  </div>

<style>
  .progress-element div {
    display: flex;
  }

  .progress-element span {
    margin-left: 9px;
    color: #000;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
  }

  .recent-activity-table th {
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    padding: 6px 0 6px 12px;
  }

  .recent-activity-widget {
    margin-bottom: 32px;
  }

  .recent-activity-widget table {
    border-collapse: collapse;
    width: 100%;
    box-shadow: 0px 3px 2.5px 0px rgba(0, 0, 0, 0.42);
    background-color:#fff;
    border-bottom: 2px solid #185A7D;
  }

  .progress-element {
    border-left: none !important;
  }

  .name-element {
    border-right: none !important;
  }

  .recent-activity-widget td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #185A7D;
  }

  .recent-activity-widget th {
    color:#fff;
    border-color: #185A7D;
    background-color: #185A7D;
  }

  .name-element a,
  .name-element a:visited {
    color: #0077B8;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
  }

  .name-element a:hover {
    color: #185A7D;
  }
</style>

<script>

  const table = document.getElementById('recentActivityTable');
  const tbody = table.querySelector('tbody'); // Select the tbody element
  const rows = Array.from(tbody.querySelectorAll('tr'));

  const sortedRows = rows
    .map(row => ({ progress: parseInt(row.getAttribute('data-progress')), element: row }))
    .sort((a, b) => a.progress - b.progress);

  rows.forEach(row => tbody.removeChild(row));

  sortedRows.forEach((sortedRow, index) => {
    if (index < 6) {
      tbody.appendChild(sortedRow.element)
    }
  });

</script>