<div class="main flex vertical centered darkBackground">
  <%- @Icon('full-logo', 'wizard-logo') %>
  <div class="import wizard">
    <div class="wizard-slide vertical" data-slide="otrs-plugin">
      <h2><%- @T('Download %s Migration Plugin', 'OTRS') %></h2>
      <div class="wizard-body flex vertical justified">
        <p>
          <%- @T('Download and install the %s Migration Plugin on your %s instance.', 'OTRS', 'OTRS') %>:
        </p>
        <a class="btn btn--primary btn--download js-download" target=_blank href="https://addons.znuny.com/api/addon_repos/public/1085/latest" download><%- @Icon('download') %> <%- @T('Migration Plugin for %s', 'OTRS 6') %></a>
        <a class="btn btn--primary btn--download js-download" target=_blank href="https://addons.znuny.com/api/addon_repos/public/617/latest" download><%- @Icon('download') %> <%- @T('Migration Plugin for %s', 'OTRS 5') %></a>
        <a class="btn btn--primary btn--download js-download" target=_blank href="https://addons.znuny.com/api/addon_repos/public/383/latest" download><%- @Icon('download') %> <%- @T('Migration Plugin for %s', 'OTRS 4') %></a>
        <a class="btn btn--primary btn--download js-download" target=_blank href="https://addons.znuny.com/api/addon_repos/public/287/latest" download><%- @Icon('download') %> <%- @T('Migration Plugin for %s', 'OTRS 3.3-3.1') %></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 %s', '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"><%- @T('Link %s', 'OTRS') %></label>
          <div class="u-positionOrigin">
            <input type="url" id="otrs-link" class="form-control" placeholder="http://example.com/otrs/public.pl?Action=ZammadMigrator;Key=31337" 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-check"><%- @T('Migrate %s Data', 'OTRS') %></div>
      </div>
    </div>

    <div class="wizard-slide vertical hide" data-slide="otrs-import">
      <h2><%- @T('%s Migration', 'OTRS') %></h2>
      <div class="alert alert--danger hide js-error" role="alert"></div>
      <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="1"></progress></div>
                <%- @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 class="wizard-slide vertical hide" data-slide="otrs-import-notice">
      <h2><%- @T('Notice') %></h2>
      <div class="wizard-body flex vertical justified">
        <p class="js-otrsProcesses hide"><%- @T('We detected OTRS BPM processes which can\'t get imported into Zammad, since we currently don\'t support these kind of workflows.') %></p>
        <p class="js-otrsDynamicFields hide"><%- @T('We found a lot of dynamic fields which are not common in Zammad, as we follow a different approach to ticket attributes. Zammad uses also tags in addition to custom fields to classify tickets. This difference can create a new philosophy of your ticket attributes / tags compared to your current use of dynamic fields in OTRS.') %></p>
      </div>
      <div class="wizard-controls horizontal center">
        <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
        <a href="#" class="btn btn--primary align-right js-migration-start"><%- @T('Continue anyway') %></a>
      </div>
    </div>

  </div>
</div>