.modal.fade#modal-group-memberships{ aria: { hidden: true, labelledby: 'modal-group-memberships-label' }, role: :dialog, tabindex: -1 }
  .modal-dialog
    .modal-content
      .modal-header
        %h5.modal-title#modal-group-memberships-label= t 'views.modal.group.title'
        %button.close{ data: { dismiss: :modal }, type: :button }
          %span{ aria: { hidden: true } } ×
          %span.sr-only= t 'views.actions.close'
      %div{ role: 'tabpanel' }
        %ul.nav.nav-tabs.mt-1{ role: 'tablist' }
          %li.nav-item{ role: 'presentation' }
            %a.nav-link.active{ href: '#grouplist', aria: { controls: 'grouplist' }, data: { toggle: 'tab' }, role: 'tab' }
              = t 'views.modal.group.tabs.main'
          %li.nav-item{ role: 'presentation' }
            %a.nav-link{ href: '#create', aria: { controls: 'create' }, data: { toggle: 'tab' }, role: 'tab' }
              = t 'views.modal.group.tabs.create'

        .tab-content
          .tab-pane.active{ role: 'tabpanel', id: 'grouplist' }
            %ul.list-group
              - current_user.groups.each do |group|
                = render 'modal/group/item', group: group, user: user
          .tab-pane{ role: 'tabpanel', id: 'create' }
            .modal-body
              %input.form-control#new-group-name{ type: :text, placeholder: t('views.modal.group.name') }
              %button.btn.btn-primary#create-group{ type: :button, data: { user: user.screen_name } }= t('views.modal.group.create')
      .modal-footer
        %button.btn.btn-primary{ name: 'gm-save', type: :button, data: { dismiss: :modal } }= t 'views.actions.done'