<div class="row np-flex-center">
  <div class="col-xs-12 col-sm-12">
    <div class="dashboard-filters">
      <div class="dashboard-filter-button active" data-category="all">ALL COURSES</div>
      <div class="dashboard-filter-button" data-category="in-progress">IN PROGRESS</div>
      <div class="dashboard-filter-button" data-category="completed">COMPLETED</div>
			{% comment %}
      {% for category in categories.enrolled %}
        <div class="dashboard-filter-button" data-category="{{ category.id }}">{{ category.name | upcase }}</div>
			{% endfor %}
			{% endcomment %}
    </div>
  </div>
</div>

<style>
  .dashboard-filters {
    display: flex;
    margin-bottom: 32px;
  }

  .dashboard-filter-button {
    margin-right: 16px;
    text-transform: uppercase;
    color: #000;
    padding: 8px 12px;
    cursor: pointer;
    font-family: "Lato"
    , sans-serif;
    font-weight: 700;
  }

  .dashboard-filter-button.active {
    background-color: #a0874e;
    color: #fff;
  }
</style>
