<div class="main flex vertical centered darkBackground">
  <%- @Icon('full-logo', 'wizard-logo') %>
  <div class="import wizard">
    <div class="wizard-slide vertical" data-slide="otrs-prepare">
      <h2><%- @T('Create OTRS Migration Plugin') %></h2>
      <div class="wizard-body flex vertical justified">
        <p class="wizard-loadingText">
          <span class="loading icon"></span> <%- @T('Personalise Migration Plugin ...') %>
        </p>
      </div>
      <div class="wizard-controls horizontal center">
        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
      </div>
    </div>
    <div class="wizard-slide vertical hide" data-slide="otrs-plugin">
      <h2><%- @T('Download OTRS Migration Plugin') %></h2>
      <div class="wizard-body flex vertical justified">
        <p>
          <%- @T('Download and install your personalised OTRS Migration Plugin on your OTRS System') %>:
        </p>
        <a class="btn btn--primary btn--download js-download" download><%- @Icon('download') %> <%- @T('Personal Migration Plugin') %></a>
      </div>
      <div class="wizard-controls horizontal center">
        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
        <div class="btn btn--primary align-right hide js-otrs-link"><%- @T('Next') %></div>
      </div>
    </div>
    <div class="wizard-slide vertical hide" data-slide="otrs-link">
      <h2><%- @T('Link OTRS') %></h2>
      <div class="wizard-body flex vertical justified">
        <p>
          <%- @T('Enter the link provided by the plugin at the end of the installation to link the two systems') %>:
        </p>
        <div class="form-group">
          <label for="otrs-link">OTRS Link</label>
          <div class="u-positionOrigin">
            <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.example.com" name="url">
            <div class="input-feedback centered">
              <div class="small loading icon"></div>
              <%- @Icon('diagonal-cross', 'icon-error') %>
              <%- @Icon('checkmark') %>
            </div>
          </div>
          <div class="error otrs-link-error"></div>
        </div>
      </div>
      <div class="wizard-controls horizontal center">
        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
        <div class="btn btn--primary align-right hide js-migration-start" data-target="otrs-start-migration"><%- @T('Migrate OTRS Data') %></div>
      </div>
    </div>

    <div class="wizard-slide vertical hide" data-slide="otrs-import">
      <h2><%- @T('OTRS Migration') %></h2>
      <div class="wizard-body flex vertical justified">
        <table class="progressTable">
          <tr class="js-config">
            <td>
            <td><span><%- @T('Configuration') %></span>
            <td class="progressTable-progressCell">
              <div class="horizontal center">
                <div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
                <%- @Icon('checkmark') %>
              </div>
          </tr>
          <tr class="js-base">
            <td><span class="js-done">-</span>/<span class="js-total">-</span>
            <td><span><%- @T('Base Objects') %></span>
            <td class="progressTable-progressCell">
              <div class="horizontal center">
                <div class="flex"><progress max="42" value="42"></progress></div>
                <%- @Icon('checkmark') %>
              </div>
          </tr>
          <tr class="js-user">
            <td><span class="js-done">-</span>/<span class="js-total">-</span>
            <td><span><%- @T('Users') %></span>
            <td class="progressTable-progressCell">
              <div class="horizontal center">
                <div class="flex"><progress max="42" value="42"></progress></div>
                <%- @Icon('checkmark') %>
              </div>
          </tr>
          <tr class="js-ticket">
            <td><span class="js-done">-</span>/<span class="js-total">-</span>
            <td><span><%- @T('Tickets') %></span>
            <td class="progressTable-progressCell">
              <div class="horizontal center">
                <div class="flex"><progress max="134318" value="134318"></progress></div>
                <%- @Icon('checkmark') %>
              </div>
          </tr>
        </table>
      </div>
      <div class="wizard-controls horizontal center">
        <a href="#" class="btn btn--primary align-right hide js-finished"><%- @T('Done') %></a>
      </div>
    </div>

  </div>
</div>