{% load i18n static horillafilters %}
<div class="oh-sticky-table" style="height: 250px;">
  {% if contribution_deductions %}
  <div class="oh-sticky-table__table oh-table--sortable">
    <div class="oh-sticky-table__thead">
      <div class="oh-sticky-table__tr">
        <div class="oh-sticky-table__th">
          {% trans 'Deduction' %}
        </div>
        <div class="oh-sticky-table__th">
          {% trans 'Employee Contribution' %}
        </div>
        <div class="oh-sticky-table__th">
          {% trans 'Employer Contribution' %}
        </div>
      </div>
    </div>
    <div class="oh-sticky-table__tbody">
      {% for deduction in contribution_deductions %}
        <div class="oh-sticky-table__tr" draggable="true">
          <div class="oh-sticky-table__sd">
            <div class="oh-profile oh-profile--md">
              <div class="oh-profile__avatar mr-1">
                <img src="https://ui-avatars.com/api/?name={{ deduction.title }}&background=random" class="oh-profile__image" />
              </div>
              <span class="oh-profile__name oh-text--dark">{{ deduction.title }}</span>
            </div>
          </div>
          <div class="oh-sticky-table__td">{{ deduction.employee_contribution|floatformat:2|currency_symbol_position }}</div>
          <div class="oh-sticky-table__td">{{ deduction.employer_contribution|floatformat:2|currency_symbol_position }}</div>
        </div>
      {% endfor %}
    </div>
    {% else %}
    <div align="center" style="width: 720px">
      <img width="100px" class="mt-5" src="{% static 'images/ui/no_records.svg' %}" alt="" />
      <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No records available." %}</h3>
    </div>
  {% endif %}
  </div>
</div>
