<div id="obico-wizard" class="obico-wizard-content" data-bind="css: {'obico-bg-primary': [5].includes(step())}">
  <div class="obico-navigation">
    <a href="#" class="obico-back-btn" data-bind="click: prevStep, visible: ![1,5].includes(step())">
      ❮ Back
    </a>
    <div style="width: 70px;" data-bind="visible: step() === 1"></div>
    <div class="obico-progress-content" data-bind="visible: step() !== 5">
      <div class="obico-circles">
        <div class="obico-circle" data-bind="css: {filled: step() >= 1, checked: step() > 1}"></div>
        <div class="obico-circle" data-bind="css: {filled: step() >= 2, checked: step() > 2}"></div>
        <div class="obico-circle" data-bind="css: {filled: step() >= 3, checked: step() > 3}"></div>
        <div class="obico-circle" data-bind="css: {filled: step() >= 4, checked: step() > 4}"></div>
      </div>
    </div>
  </div>

  <div data-bind="visible: step() === 1" class="obico-home-slide">
    <div>
      <div class="obico-header">
        <h2 class="obico-title">Obico for OctoPrint</h2>
      </div>
      <p><strong>Obico</strong> is an <a href="https://github.com/TheSpaghettiDetective/obico-server">commuity-built, open source project</a> smart 3D printing platform used by makers, enthusiasts and tinkerers around the world.</p>
      <p>With Obico for OctoPrint, you can access and monitor OctoPrint <strong>anywhere, on your phone</strong>. It also uses AI (Deep Learning) to detect print failures in real time and send you alerts.</p>
      <div class="obico-features">
        <div class="obico-features-blocks">
          <div class="obico-feature" data-number="1">
            <img src="plugin/obico/static/img/features/icon-connection.svg" alt="">
            <div class="obico-feature-text">
              <div class="obico-title">Manage printer on your phone</div>
              <p class="obico-description">Start/pause/cancel prints anytime, anywhere! Upload your print files and kick-off prints from your phone, desktop, or tablet.</p>
            </div>
          </div>
          <div class="obico-feature" data-number="2">
            <img src="plugin/obico/static/img/features/icon-security.svg" alt="">
            <div class="obico-feature-text">
              <div class="obico-title">Secure remote access</div>
              <p class="obico-description">Access your printer securely from anywhere without opening your home network to the wild internet.</p>
            </div>
          </div>
          <div class="obico-feature" data-number="3">
            <img src="plugin/obico/static/img/features/icon-fire.svg" alt="">
            <div class="obico-feature-text">
              <div class="obico-title">Catch print hazards early</div>
              <p class="obico-description">Check in your prints in real time to instantly know if the printer is acting up.</p>
            </div>
          </div>
          <div class="obico-feature" data-number="4">
            <img src="plugin/obico/static/img/features/icon-money.svg" alt="">
            <div class="obico-feature-text">
              <div class="obico-title">Save time and money</div>
              <p class="obico-description">Obico watched your prints constantly for problems and intervenes to catch failures early.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="obico-get-started">
        <h4>Which Obico Server do you want to link OctoPrint to?</h4>
        <div class="control-group">
          <div class="controls">
              <label class="radio">
                <input
                  type="radio"
                  name="serverAddressRadioGroup"
                  value="cloud"
                  data-bind="checked: serverType, click: resetEndpointPrefix"
                >
                  The Obico Cloud
                </input>
              </label>
              <div class="radio obico-text-muted" style="margin-bottom: 6px;">Proudly maintained by <a href="https://www.obico.io/team.html">the Obico team</a>.</div>
              <div class="radio obico-text-muted" style="margin-bottom: 6px;">Free for 1 printer. Pro plan starts from $4/month. <a href="https://app.obico.io/ent_pub/pricing/">Learn more <i class="fa fa-external-link" aria-hidden="true"></i></a></div>
              <br />
              <label class="radio">
                <input
                  type="radio"
                  name="serverAddressRadioGroup"
                  value="self-hosted"
                  data-bind="checked: serverType, click: clearEndpointPrefix"
                >
                  A self-hosted Obico Server.
                </input>
              </label>
              <div class="radio obico-text-muted" style="margin-bottom: 6px;">Learn more about <a href="https://www.obico.io/docs/server-guides/">hosting your own Obico Server <i class="fa fa-external-link" aria-hidden="true"></i></a>.</div>

              <div class="radio">
                <input
                  id="endpoint_prefix-input"
                  type="text"
                  class="endpoint-prefix"
                  data-bind="value: settingsViewModel.settings.plugins.obico.endpoint_prefix, hidden: serverType() === 'cloud'"
                  style="width: calc(100% - 14px)"
                ></input>
                <p class="text-error" data-bind="visible: isServerInvalid()">Invalid server address</p>
              </div>
            </div>
        </div>
        <div class="obico-flex obico-align-start">
          <div class="obico-text-with-checkbox" data-bind="click: toggleCheck">
            <div class="obico-checkbox-wrapper" data-bind="css: {checked: userAgreementChecked}"></div>
            By proceeding you agree to our <a href="https://obico.io/privacy.html">Privacy Policy</a>
              and the <a href="https://obico.io/terms.html">Terms of Use</a>
          </div>
          <div class="obico-get-started-wrapper">
            <button
              class="obico-button obico-button_solid setup-wizard-btn"
              id="next"
              data-bind="click: nextStep, enable: userAgreementChecked, visible: step() === 1"
            >
            <span>Setup Plugin</span>
            <svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-bind="visible: step() === 2">
    <div class="obico-header">
      <h2 class="obico-title obico-primary">Setup with mobile app or web browser?</h2>
    </div>
    <div>You will need to sign up for a new Obico account if you don't already have one.</div>
    <div>Do  you want to do it in the mobile app or in the web browser?</div>
    <br />
    <div class="obico-choice-container">
      <div class="obico-choice-banner">
        <div class="obico-option" data-bind="click: function(data, event) { nextStep(); mobileFlow(true); }">
          <img src="plugin/obico/static/img/phone-illustration.svg" alt="">
          <h2>Mobile Setup</h2>
          <a href="#" class="obico-button obico-filled">Continue with <strong>Mobile App</strong></a>
        </div>
        <div class="obico-delimeter"></div>
        <div class="obico-option" data-bind="click: function(data, event) { nextStep(); mobileFlow(false); }">
          <img src="plugin/obico/static/img/desktop-illustration.svg" alt="">
          <h2>Web Setup</h2>
          <a href="#" class="obico-button obico-outline">Continue with <strong>Web Site</strong></a>
        </div>
      </div>
      <div class="obico-notes">*Note: You can always switch later.</div>
    </div>
  </div>

  <div data-bind="visible: step() === 3 && mobileFlow()">
    <div class="obico-header">
      <h2 class="obico-title obico-primary">Sign into the <strong>mobile app</strong></h2>
    </div>
    <div>
      <ol>
        <li>Download Obico mobile app.</li>
        <li>Sign up for a Obico account. Or sign in if you already have one.</li>
        <li>Click the "Link OctoPrint" button in the mobile app.
        <li>If OctoPrint shows up in the mobile app, click "Link" to finish linking it.</li>
        <li>Otherwise, switch to "manual linking" and get the <strong>6-digit verification code</strong>.</li>
        <li>Come back here and press "CONTINUE".</li>
      </ol>
      <div class="text-center">
        <button class="obico-button obico-button_solid" data-bind="click: nextStep">CONTINUE</button>
        <div class="text-right">
          <a href="#" class="obico-small"  data-bind="click: function(data, event) { mobileFlow(false); }">
            Setup through web browser instead
            <img src="plugin/obico/static/img/arrow-right-gray.svg" alt="">
          </a>
        </div>
      </div>
      <div class="obico-bottom-illustration">
        <img src="plugin/obico/static/img/mobile-setup-illustration.svg" alt="" class="obico-mobile-screen">
        <div class="obico-mobile-links">
          <div class="obico-buttons" style="flex-direction: column; line-height: 20px;">
            <a href="https://play.google.com/store/apps/details?id=com.thespaghettidetective.android" class="obico-button" style="width: 100%;" target="_blank">
              <img src="plugin/obico/static/img/google-play-btn.svg" alt="">
            </a>
            <a href="https://apps.apple.com/us/app/the-spaghetti-detective/id1540646623?uo=4" class="obico-button" style="margin-top: 20px; width: 100%;" target="_blank">
              <img src="plugin/obico/static/img/app-store-btn.svg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div data-bind="visible: step() === 3 && !mobileFlow()">
    <div class="obico-header">
      <h2>Sign into <a data-bind="attr: { href: settingsViewModel.settings.plugins.obico.endpoint_prefix() + '/accounts/signup/?source=plugin' }" target="_blank">Obico website</a></h2>
    </div>
    <div>
      <ol>
        <li>Click <a data-bind="attr: { href: settingsViewModel.settings.plugins.obico.endpoint_prefix() + '/accounts/signup/?source=plugin' }" target="_blank">here</a> to open Obico website in a separate tab.
        <li>Sign up for a Obico account. Or sign in if you already have one.</li>
        <li>Click the "Link OctoPrint" button in the web app.
        <li>If OctoPrint shows up in the web app, click "Link" to finish linking it.</li>
        <li>Otherwise, switch to "manual linking" and get the <strong>6-digit verification code</strong>.</li>
        <li>Come back here and press "CONTINUE".</li>
      </ol>
      <div class="text-center">
        <button class="obico-button obico-button_solid" data-bind="click: nextStep">CONTINUE</button>
        <div class="text-right">
          <a href="#" class="obico-small" data-bind="click: function(data, event) { mobileFlow(true); }">
            Setup through mobile app instead
            <img src="plugin/obico/static/img/arrow-right-gray.svg" alt="">
          </a>
          <br /><br />
          <div class="obico-small">*Note: You can always download Obico mobile app later</div>
        </div>
      </div>

    </div>
  </div>

  <div data-bind="visible: step() === 4">
    <div>
      <div class="obico-header">
        <h2>Verification Code</h2>
      </div>
      <div class="obico-mobile-verification-wrapper">
        <div class="obico-description">
          <p>To link OctoPrint to your account, you need to obtain the <strong>6-digit verification code</strong> in Obico mobile app or web app, and enter the code below.</p>
          <div class="obico-verification-wrapper">
            <label>6-Digit Verification Code:</label>
            <div class="obico-input-wrapper obico-verification-code-input">
              <input type="text" class="obico-cell" data-number="1" maxlength="1" pattern="\d*">
              <input type="text" class="obico-cell" data-number="2" maxlength="1" pattern="\d*">
              <input type="text" class="obico-cell" data-number="3" maxlength="1" pattern="\d*">
              <input type="text" class="obico-cell" data-number="4" maxlength="1" pattern="\d*">
              <input type="text" class="obico-cell" data-number="5" maxlength="1" pattern="\d*">
              <input type="text" class="obico-cell" data-number="6" maxlength="1" pattern="\d*">
            </div>
            <small style="color: #888;">Enter code or Ctrl-V/Cmd-V to paste</small>
            <small class="obico-error-message">
              Wrong code!<br>
              Did you enter an expired code?
            </small>
            <small class="obico-unknown-error">
              Failed to talk to Obico Server!<br>
              Make sure OctoPrint is connected to the Internet.
            </small>
            <small class="obico-success-message">
              Success!<br>
              OctoPrint successfully linked.
            </small>
            <div class="obico-loader" data-bind="visible: verifying">
              <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                  <path fill="#000" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                    <animateTransform
                      attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      dur="1s"
                      from="0 50 50"
                      to="360 50 50"
                      repeatCount="indefinite" />
                </path>
              </svg>
            </div>
            <textarea class="obico-paste-from-clipboard-placeholder"></textarea>
          </div>
        </div>
        <div class="obico-illustration">
          <img src="plugin/obico/static/img/phone-verification-illustration.svg" class="obico-image" alt="">
          <img src="plugin/obico/static/img/arrow-left-curved.svg" class="obico-arrow" alt="">
        </div>
      </div>
      <div class="obico-collapsable">
        <h4 class="obico-collapsable-title">
          Help
        </h4>
        <div class="obico-collapsable-content">
          <ul>
            <li>Lost? Check out the <a href="https://www.obico.io/docs/user-guides/octoprint-plugin-setup/" target="_blank">step-by-step setup guide</a>.</li>
            <li><a href="#" data-bind="click: function(data, event) { toStep(1); }">Walk through this wizard again.</a></li>
            <li>Need more help? Visit <a href="https://discord.com/invite/NcZkQfj" target="_blank">Obico discord forum</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div data-bind="visible: step() === 5">
    <div class="obico-flex obico-justify-center obico-successful-setup">
      <div class="obico-flex obico-col obico-align-center">
        <img src="plugin/obico/static/img/checkmark-circled.svg" class="obico-checkmark-circle" alt="">
        <h1 class="obico-title white">OctoPrint Linked Successfully!</h1>
        <div class="obico-sub-title">Now you can close this window and go back to Obico mobile app or web app to check the printer feed.</div>
        <div class="obico-button-wrapper">
          <button class="obico-auto-close" data-bind="click: hideWizardModal">
            <svg class="obico-progress-border" viewBox="0 0 50 50">
              <g>
                <circle class="obico-under" cx="25" cy="25" r="20.9" stroke-width="4" />
                <circle class="obico-progress" cx="25" cy="25" r="21" stroke-width="4" />
              </g>
            </svg>
            <span class="obico-text">Close</span>
          </button>
        </div>
      </div>
    </div>
    <div>
      <a href="https://discord.com/invite/NcZkQfj" class="obico-discord-link" target="_blank">
        <img src="plugin/obico/static/img/discord.svg" alt="">
        <div class="obico-text">JOIN OUR DISCORD FORUM</div>
      </a>
    </div>
  </div>
</div>
