<div class="modal-dialog">

  <form class="modal-content setup wizard js-discover">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %> <%- @T('Configuration') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <table class="settings-list" style="width: 100%;">
          <thead>
            <tr>
              <th width="30%"><%- @T('Name') %>
              <th width="70%"><%- @T('Value') %>
          </thead>
          <tbody>
            <tr>
              <td class="settings-list-row-control"><%- @T('User') %>
              <td class="settings-list-control-cell"><input type="text" name="user" class="form-control form-control--small js-user" value="" placeholder="user@your-exchange.tld" autocomplete="off" required>
            <tr>
              <td class="settings-list-row-control"><%- @T('Password') %>
              <td class="settings-list-control-cell"><input type="password" name="password" class="form-control form-control--small js-password" value="" placeholder="" autocomplete="new-password" required>
          </tbody>
        </table>
      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right js-submit"><%- @T('Connect') %></button>
      </div>
    </div>
  </form>

  <div class="js-certificateIssuePlaceholder"></div>

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

  <form class="modal-content setup wizard hide js-bind">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %> <%- @T('Configuration') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <table class="settings-list" style="width: 100%;">
          <thead>
            <tr>
              <th width="30%"><%- @T('Name') %>
              <th width="70%"><%- @T('Value') %>
          </thead>
          <tbody>
            <tr>
              <td class="settings-list-row-control"><%- @T('Endpoint') %>
              <td class="settings-list-control-cell"><input type="text" name="endpoint" class="form-control form-control--small" value="" placeholder="https://outlook.office365.com/EWS/Exchange.asmx" autocomplete="off" required>

            <tr>
              <td class="settings-list-row-control"><%- @T('User') %>
              <td class="settings-list-control-cell"><input type="text" name="user" class="form-control form-control--small js-user" value="" placeholder="" autocomplete="off" required>
            <tr>
              <td class="settings-list-row-control"><%- @T('Password') %>
              <td class="settings-list-control-cell"><input type="password" name="password" class="form-control form-control--small js-password" value="" placeholder="" autocomplete="new-password" required>
          </tbody>
        </table>
      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right js-submit"><%- @T('Connect') %></button>
      </div>
    </div>
  </form>

  <form class="modal-content setup wizard hide js-folders">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %> <%- @T('Folders') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>

        <div class="column_select form-group">
            <div class="formGroup-label">
                <label for="folders"><%- @T('Import %s', 'Folders') %></label>
            </div>
            <div class="controls js-foldersSelect">
            </div>
        </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-bind"><%- @T('Go Back') %></a>
      </div>
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right js-submitTry is-disabled"><%- @T('Continue') %></button>
      </div>
    </div>
  </form>

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

  <div class="modal-content setup wizard hide js-mapping">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %> <%- @T('Mapping') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>

        <h2><%- @T('User') %></h2>
        <form class="js-userMappingForm">
          <table class="settings-list js-userAttributeMap" style="width: 100%;">
            <colgroup>
              <col width="240">
              <col>
              <col>
            </colgroup>
            <thead>
              <tr>
                <th><%- @T('%s Attribute', 'Exchange') %>
                <th><%- @T('%s Attribute', 'Zammad') %>
                <th><%- @T('Action') %>
            </thead>
            <tbody>
              <tr>
                <td class="settings-list-row-control" colspan="3">
                  <div class="btn btn--text btn--create js-add">
                    <%- @Icon('plus-small') %> <%- @T('Add') %>
                  </div>
            </tbody>
          </table>
        </form>

      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
        <a class="btn btn--text btn--secondary js-goToSlide align-left" data-slide="js-bind"><%- @T('Go Back') %></a>
      </div>
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right js-submitTry"><%- @T('Continue') %></button>
      </div>
    </div>
  </div>

  <form class="modal-content setup wizard hide js-dry">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %> <%- @T('Configuration') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="js-preprogress">
          <p class="wizard-loadingText">
            <span class="loading icon"></span>
            <%- @T('Counting entries. This may take a while.') %>
          </p>
        </div>
        <div class="js-analyzing hide">
          <p class="wizard-loadingText">
            <%- @T('Analyzing entries with given configuration...') %>
          </p>
          <div class="centered js-progress">
            <progress max="" value=""></progress>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer"></div>
  </form>

  <div class="modal-content setup wizard hide js-try">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %> <%- @T('Configuration') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
        <p><%- @T('With your current configuration the following will happen') %>:</p>
        <div class="js-summary"></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-mapping"><%- @T('Go Back') %></a>
      </div>
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right js-submitSave"><%- @T('Save configuration') %></button>
      </div>
    </div>
  </div>

  <form class="modal-content setup wizard hide js-error">
    <div class="modal-header">
      <div class="modal-close js-close">
        <%- @Icon('diagonal-cross') %>
      </div>
      <h1 class="modal-title"><%- @T('Exchange') %></h1>
    </div>
    <div class="modal-body">
      <div class="wizard-body vertical justified">
        <div class="alert alert--danger hide" role="alert"></div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="modal-rightFooter">
        <button class="btn btn--primary align-right"><%- @T('Cancel') %></button>
      </div>
    </div>
  </form>

</div>
