<div class="large-table">
  <div class="header <%= "top" if @_smartphonesGroups.length > 0 %>">
    <div class="uppercase-section-column stretchable"><%= t 'wallet.settings.hardware.paired_smartphones' %></div>
    <a class="uppercase-action" href="#pairSmartphone"><i class="fa fa-plus"></i><%= t 'wallet.settings.hardware.pair_a_smartphone' %></a>
  </div>
  <% for smartphonesGroup, i in @_smartphonesGroups: %>
  <div class="row <% if i == @_smartphonesGroups.length - 1: %><%= "bottom" %><% else: %><%= "middle" %><% end %>">
    <div class="light-grey-icon-large"><i class="fa fa-mobile"></i></div>
    <div class="regular-text-small stretchable"><%= smartphonesGroup[0].name %></div>
    <div class="regular-grey-text-small">
      <% if smartphonesGroup.length > 1: %>
          <%= _.str.sprintf(t('wallet.settings.hardware.multiple_paired_devices'), smartphonesGroup.length) %>
      <% else: %>
          <%= _.str.sprintf(t('wallet.settings.hardware.single_paired_device'), smartphonesGroup.length) %>
      <% end %>
    </div>
    <a class="light-grey-icon-medium" href="#removeSmartphoneGroup(index=<%= i %>)"><i class="fa fa-trash"></i></a>
  </div>
  <% end %>
</div>