%div{"data-controller": "login-modal" }
  .reveal-modal-bg.fade.in{ "data-login-modal-target": "background", "data-action": "click->login-modal#returnHome", style: "display: block;" }

  .reveal-modal.fade.login-modal.medium.in{ "data-login-modal-target": "modal", style: "display: block;" }
    .row.modal-centered
      %h2= t('js.registration.welcome_to_ofn')
      %h5= t('js.registration.signup_or_login')

    %div{ "data-controller": "tabs" }
      %dl.tabs
        %dd
          %a{ data: { "tabs-target": "tab", "action": "tabs#select" } }= t(:label_signup)
        %dd
          %a{ data: { "tabs-target": "tab", "action": "tabs#select" } }= t(:label_login)
        %dd
          %a{ data: { "tabs-target": "tab", "action": "tabs#select" } }= t(:forgot_password)

      .tabs-content
        .content.active
          %div{ data: { "tabs-target": "content" } }
            = render "layouts/signup_tab"
          %div{ data: { "tabs-target": "content" } }
            = render "layouts/login_tab"
          %div{ data: { "tabs-target": "content" } }
            = render "layouts/forgot_tab"

    %a.close-reveal-modal{ "data-action": "click->login-modal#returnHome" }
      %i.ofn-i_009-close