.modal.fade#modal-list-memberships{ aria: { hidden: true, labelledby: "modal-list-memberships-label" }, role: :dialog, tabindex: -1 }
  .modal-dialog
    .modal-content
      .modal-header
        %h5.modal-title#modal-list-memberships-label= t(".title")
        %button.btn-close{ data: { dismiss: :modal }, type: :button }
          %span{ aria: { hidden: true } } ×
          %span.visually-hidden= t("voc.close")
      %div{ role: :tabpanel }
        %ul.nav.nav-tabs.mt-1{ role: :tablist }
          %li.nav-item{ role: "presentation" }
            %a.nav-link.active{ href: "#lists-list", aria: { controls: "lists-list" }, data: { bs_toggle: :tab }, role: :tab }
              = t(".tab.list.title")
          %li.nav-item{ role: "presentation" }
            %a.nav-link{ href: "#create", aria: { controls: "create" }, data: { bs_toggle: :tab }, role: :tab }
              = t(".tab.create.title")

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