<div class="modal-dialog wizard">

  <form class="modal-content setup wizard js-intro">
    <!-- dummy to prevent chrome to ask for password save -->
    <input style="display:none">
    <input type="password" style="display:none">
    <!-- /dummy to prevent chrome to ask for password save -->
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Email Account') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <div class="base-settings"></div>
      </div>
    </div>
    <div class="modal-footer">
        <div class="modal-centerFooter">
          <button class="btn btn--primary align-center"><%- @T('Connect') %></button>
        </div>
    </div>
  </form>

  <form class="modal-content setup wizard hide js-probe">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Email Account') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <p class="wizard-loadingText">
          <span class="loading icon"></span> <%- @T('Testing') %> <span class="js-email"></span>
        </p>
      </div>
    </div>
    <div class="modal-footer"></div>
  </form>

  <form class="modal-content setup wizard hide js-test">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Email Account') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <p class="wizard-loadingText">
          <span class="loading icon"></span> <%- @T('Verifying...') %>
        </p>
      </div>
    </div>
    <div class="modal-footer"></div>
  </form>

  <form class="modal-content setup wizard hide js-verify">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Email Account') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <p class="wizard-loadingText">
          <span class="loading icon"></span> <%- @T('Verify sending and receiving') %>
        </p>
      </div>
    </div>
    <div class="modal-footer"></div>
  </form>

  <form class="modal-content setup wizard hide js-inbound">
    <!-- dummy to prevent chrome to ask for password save -->
    <input style="display:none">
    <input type="password" style="display:none">
    <!-- /dummy to prevent chrome to ask for password save -->
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Email Inbound') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <div class="base-inbound-settings"></div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
      <a class="btn btn--text btn--secondary js-goToSlide align-left" data-slide="js-intro"><%- @T('Go Back') %></a>
      </div>
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right"><%- @T('Continue') %></button>
      </div>
    </div>
  </form>

  <form class="modal-content setup wizard hide js-inbound-acknowledge">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Email Inbound') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <p class="js-message"><%- @T('We have already found %s email(s) in your mailbox. Zammad will move it all from your mailbox into Zammad.', 'x') %></p>
      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
      <a class="btn btn--text btn--secondary js-goToSlide js-back align-left" data-slide="js-inbound"><%- @T('Go Back') %></a>
      </div>
      <div class="modal-rightFooter">
        <button class="btn btn--primary js-goToSlide js-next align-right" data-slide="js-outbound"><%- @T('Continue') %></button>
      </div>
    </div>
  </form>

  <form class="modal-content setup wizard hide js-outbound">
    <!-- dummy to prevent chrome to ask for password save -->
    <input style="display:none">
    <input type="password" style="display:none">
    <!-- /dummy to prevent chrome to ask for password save -->
    <div class="modal-header">
        <div class="modal-close js-close">
          <%- @Icon('diagonal-cross') %>
        </div>
        <h1 class="modal-title"><%- @T('Email Outbound') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <div class="base-outbound-type"></div>
        <div class="base-outbound-settings"></div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
      <a class="btn btn--text btn--secondary js-goToSlide align-left" data-slide="js-inbound"><%- @T('Go Back') %></a>
      </div>
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right"><%- @T('Continue') %></button>
      </div>
    </div>
  </form>

</div>
