<!-- FACTOR Plugin Setup -->
<div id="settings_plugin_factor_mqtt" class="factor-mqtt-setup">
  <!-- Language Selector -->
  <div class="language-selector">
    <div class="btn-group" id="fm-lang-selector">
      <button type="button" class="btn btn-mini" data-lang="en" title="English">EN</button>
      <button type="button" class="btn btn-mini" data-lang="ko" title="한국어">KO</button>
    </div>
  </div>

  <!-- Connection Status Panel -->
  <div id="fm-connection-status" class="connection-status-panel" style="margin-bottom: 15px; padding: 10px; border-radius: 4px; display: none;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div>
        <span id="fm-status-icon" style="margin-right: 8px;"></span>
        <span id="fm-status-text" data-i18n="status.checking">Checking connection...</span>
      </div>
      <div>
        <button id="fm-retry-btn" class="btn btn-small" style="display: none;" title="Retry connection">
          <i class="icon-refresh"></i>
          <span data-i18n="status.retry">Retry</span>
        </button>
        <button id="fm-refresh-btn" class="btn btn-small btn-link" title="Refresh status">
          <i class="icon-refresh"></i>
        </button>
      </div>
    </div>
    <div id="fm-status-details" style="margin-top: 8px; font-size: 0.9em; color: #666; display: none;">
      <div><span data-i18n="status.mqtt">MQTT:</span> <span id="fm-mqtt-status">-</span></div>
      <div><span data-i18n="status.instanceId">Instance ID:</span> <span id="fm-instance-id">-</span></div>
      <div><span data-i18n="status.subscribed">Subscribed:</span> <span id="fm-subscribed-status">-</span></div>
    </div>
  </div>

  <!-- Main Setup Container -->
  <div class="setup-container">
    <!-- Header -->
    <div class="setup-header">
      <div class="setup-logo">
        <img src="plugin/octoprint_factor/static/img/factor-app.png" alt="FACTOR" style="max-width: 200px; height: auto; margin-bottom: 20px;" />
      </div>
      <h2 data-i18n="setup.title">FACTOR Device Setup</h2>
      <p class="text-muted" data-i18n="setup.description">
        Visit the FACTOR website to register your device and complete setup.
      </p>
    </div>

    <!-- Action Buttons -->
    <div class="action-buttons">
      <a id="fm-open-setup" href="https://factor.io.kr" target="_blank" class="btn btn-primary btn-large">
        <i class="icon-external-link"></i>
        <span data-i18n="setup.button.openWeb">Open FACTOR Website</span>
      </a>
    </div>

    <!-- Help Section -->
    <div class="help-section">
      <h4 data-i18n="setup.help.title">How to Setup</h4>
      <ol>
        <li data-i18n="setup.help.step1">Click "Open FACTOR Website" button above</li>
        <li data-i18n="setup.help.step2">Login to your FACTOR account or create a new one</li>
        <li data-i18n="setup.help.step3">Complete the device registration and configuration</li>
        <li data-i18n="setup.help.step4">Your OctoPrint will be accessible remotely via FACTOR</li>
      </ol>
    </div>
  </div>
</div>
